编程 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 相关文章推荐

JS 跳转页面延迟2种方法

Mar 29 Javascript

jQuery中detach()方法用法实例

Dec 25 Javascript

jQuery前端分页示例分享

Feb 10 Javascript

JavaScript设计模式学习之“类式继承”

Mar 12 Javascript

Highcharts使用简例及异步动态读取数据

Dec 30 Javascript

jQuery语法小结(超实用)

Dec 31 Javascript

JS实现动态添加DOM节点和事件的方法示例

Apr 28 Javascript

Javarscript中模块(module)、加载(load)与捆绑(bundle)详解

May 28 Javascript

关于react-router的几种配置方式详解

Jul 24 Javascript

Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法

Oct 24 Javascript

Vue中render函数的使用方法

Jan 31 Javascript

Jquery+javascript实现支付网页数字键盘

Dec 21 jQuery

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

基于xcache的配置与使用详解

2013/06/18 PHP

thinkphp 一个页面使用2次分页的实现方法

2013/07/15 PHP

CI框架支持$_GET的两种实现方法

2016/05/18 PHP

PHP实现二维数组中的查找算法小结

2018/06/09 PHP

JavaScript 乱码问题

2009/08/06 Javascript

仅IE支持clearAttributes/mergeAttributes方法使用介绍

2012/05/04 Javascript

Clipboard.js 无需Flash的JavaScript复制粘贴库

2015/10/02 Javascript

详谈javascript异步编程

2016/02/21 Javascript

jquery对dom节点的操作【推荐】

2016/04/15 Javascript

JavaScript实现隐藏省略文字效果的方法

2017/04/27 Javascript

vue mounted 调用两次的完美解决办法

2018/10/29 Javascript

JS/HTML5游戏常用算法之追踪算法实例详解

2018/12/12 Javascript

微信小程序实现的五星评价功能示例

2019/04/25 Javascript

JavaScript 防抖和节流遇见的奇怪问题及解决

2020/11/20 Javascript

[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局

2016/03/04 DOTA

使用python采集脚本之家电子书资源并自动下载到本地的实例脚本

2018/10/23 Python

python使用matplotlib绘制热图

2018/11/07 Python

python函数不定长参数使用方法解析

2019/12/14 Python

python 穷举指定长度的密码例子

2020/04/02 Python

Python pandas对excel的操作实现示例

2020/07/21 Python

Python实现区域填充的示例代码

2021/02/03 Python

18-35岁旅游团的全球领导者：Contiki

2017/02/08 全球购物

瑞士设计师家具和家居饰品网上商店：Bruno Wickart

2019/03/18 全球购物

免税水晶：Duty Free Crystal

2019/05/13 全球购物

沃尔玛加拿大：Walmart.ca

2020/03/02 全球购物

网络体系结构及协议的定义

2014/03/13 面试题

EJB实例的生命周期

2016/10/28 面试题

廉政教育心得体会

2014/01/01 职场文书

安全生产先进个人材料

2014/02/06 职场文书

车队司机自我鉴定

2014/03/02 职场文书

未受刑事制裁公证证明

2014/09/20 职场文书

新郎新娘致辞

2015/07/31 职场文书

2015小学新教师个人工作总结

2015/10/14 职场文书

《牧场之国》教学反思

2016/02/22 职场文书

2016大学生优秀志愿者事迹材料

2016/02/25 职场文书

Java中的随机数Random

2022/03/17 Java/Android