编程 Javascript

jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

Posted in Javascript onMarch 03, 2017

本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法。分享给大家供大家参考，具体如下：

1、问题背景

设计一条折线图，但是图形中不用插件自带的颜色，需要自定义线条和折点的颜色

2、实现源码

（1）图形自分配颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #line{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById('line');
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['销售量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'销售量',
              type:'line',
              stack: '销售量',
              data:[220, 132, 601, 314, 890, 230, 510]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="line"></div>
  </body>
</html>

（2）线条自定义颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #line{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById('line');
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['销售量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'销售量',
              type:'line',
              stack: '销售量',
              itemStyle : {
                normal : {
                  lineStyle:{
                    color:'#00FF00'
                  }
                }
              },
              data:[220, 132, 601, 314, 890, 230, 510]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="line"></div>
  </body>
</html>

（3）折点自定义颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #line{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById('line');
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['销售量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'销售量',
              type:'line',
              stack: '销售量',
              itemStyle : {
                normal : {
                  color:'#00FF00',
                  lineStyle:{
                    color:'#00FF00'
                  }
                }
              },
              data:[220, 132, 601, 314, 890, 230, 510]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="line"></div>
  </body>
</html>

3、实现结果

（1）图形自分配颜色

jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

（2）线条自定义颜色

jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

（3）折点自定义颜色

jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

4、问题说明

（1）设置折线线条颜色

lineStyle:{
 color:'#00FF00'
}

（2）设置折线折点颜色

itemStyle : {
 normal : {
  color:'#00FF00'
 }
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 继承详解（三）

Jul 13 Javascript

JavaScript写的一个自定义弹出式对话框代码

Jan 17 Javascript

javascript:history.go()和History.back()的区别及应用

Nov 25 Javascript

js格式化时间和js格式化时间戳示例

Feb 10 Javascript

淘宝网提供的国内NPM镜像简介和使用方法

Apr 17 Javascript

使用javaScript动态加载Js文件和Css文件

Oct 24 Javascript

Bootstrap每天必学之导航条(二)

Mar 01 Javascript

JS异步文件分片断点上传的实现思路

Dec 25 Javascript

JS获得多个同name 的input输入框的值的实现方法

Jan 09 Javascript

移动端手指放大缩小插件与js源码

May 22 Javascript

Vue.js 无限滚动列表性能优化方案

Dec 02 Javascript

微信小程序实现滚动加载更多的代码

Dec 06 Javascript

jQuery简单实现MD5加密的方法

Mar 03 #Javascript

详解angular2封装material2对话框组件

Mar 03 #Javascript

jQuery插件jqGrid动态获取列和列字段的方法

Mar 03 #Javascript

AngularJS表格样式简单设置方法示例

Mar 03 #Javascript

AngularJS表格添加序号的方法

Mar 03 #Javascript

JS实现双击内容变为可编辑状态

Mar 03 #Javascript

jquery表单验证实例仿Toast提示效果

Mar 03 #Javascript

You might like

用PHP实现图象锐化代码

2007/06/14 PHP

PHP贪婪算法解决0-1背包问题实例分析

2015/03/23 PHP

php实现的RSS生成类实例

2015/04/23 PHP

游戏人文件夹程序 ver 3.0

2006/07/14 Javascript

实现动画效果核心方式的js代码

2013/09/27 Javascript

给html超链接设置事件不使用href来完成跳

2014/04/20 Javascript

微信小程序选择器（时间，日期，地区）实例详解

2016/11/16 Javascript

使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

2017/03/15 Javascript

React中上传图片到七牛的示例代码

2017/10/10 Javascript

为输入框加入数字js校验代码分享

2017/11/02 Javascript

关于vue的语法规则检测报错问题的解决

2018/05/21 Javascript

详解Vue+axios+Node+express实现文件上传(用户头像上传)

2018/08/10 Javascript

NodeJS有难度的面试题(能答对几个)

2019/10/09 NodeJs

js中位数不足自动补位扩展padLeft、padRight实现代码

2020/04/06 Javascript

Vue CLI4 Vue.config.js标准配置(最全注释)

2020/06/05 Javascript

35个Python编程小技巧

2014/04/01 Python

pycharm 使用心得（五）断点调试

2014/06/06 Python

json跨域调用python的方法详解

2017/01/11 Python

Python多进程入门、分布式进程数据共享实例详解

2019/06/03 Python

Python+OpenCV+pyQt5录制双目摄像头视频的实例

2019/06/28 Python

Python实现最大子序和的方法示例

2019/07/05 Python

python numpy 常用随机数的产生方法的实现

2019/08/21 Python

python代码实现TSNE降维数据可视化教程

2020/02/28 Python

Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)

2020/11/24 Python

python UIAutomator2使用超详细教程

2021/02/19 Python

Luxplus瑞典：香水和美容护理折扣

2018/01/28 全球购物

财会自我鉴定范文

2013/12/27 职场文书

消防安全管理制度

2014/02/01 职场文书

生物制药专业自我鉴定

2014/02/19 职场文书

经典安踏广告词

2014/03/21 职场文书

解除合同协议书

2014/04/17 职场文书

社区义诊活动总结

2014/04/30 职场文书

青年教师师德演讲稿

2014/08/26 职场文书

2014银行领导班子四风对照检查材料思想汇报

2014/09/25 职场文书

幼儿园新生开学寄语

2015/05/27 职场文书

使用 CSS 轻松实现一些高频出现的奇形怪状按钮

2021/12/06 HTML / CSS