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

xmlHTTP实例

Oct 24 Javascript

JS实多级联动下拉菜单类，简单实现省市区联动菜单！

May 03 Javascript

JavaScript Event学习第七章事件属性

Feb 07 Javascript

JS原型对象通俗"唱法"

Dec 27 Javascript

jquery validate demo 基础

Oct 29 Javascript

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

Feb 03 Javascript

JS实现1000以内被3或5整除的数字之和

Feb 18 Javascript

Angular的MVC和作用域

Dec 26 Javascript

Vue.js中的图片引用路径的方式

Jul 28 Javascript

前端常见跨域解决方案（全）

Sep 19 Javascript

原生js实现针对Dom节点的CRUD操作示例

Aug 26 Javascript

JavaScript单线程和任务队列原理解析

Feb 04 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

smarty 缓存控制前的页面静态化原理

2013/03/15 PHP

ThinkPHP提示错误Fatal error: Allowed memory size的解决方法

2015/02/12 PHP

支持汉转拼和拼音分词的PHP中文工具类ChineseUtil

2018/02/23 PHP

javascript URL锚点取值方法

2009/02/25 Javascript

原生js实现查找/添加/删除/指定元素的class

2013/04/12 Javascript

jquery显示隐藏input对象

2014/07/21 Javascript

JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

2016/06/05 Javascript

AngularJS框架的ng-app指令与自动加载实现方法分析

2017/01/04 Javascript

js输入框使用正则表达式校验输入内容的实例

2017/02/12 Javascript

jQuery中绑定事件bind() on() live() one()的异同

2017/02/23 Javascript

vue router下的html5 history在iis服务器上的设置方法

2017/10/18 Javascript

JS实现小球的弹性碰撞效果

2017/11/11 Javascript

Vue 中mixin 的用法详解

2018/04/23 Javascript

微信小程序实现图片上传功能

2018/05/28 Javascript

小程序实现简单语音聊天的示例代码

2020/07/24 Javascript

JavaScript实现图片合成下载的示例

2020/11/19 Javascript

Python中声明只包含一个元素的元组数据方法

2014/08/25 Python

简单介绍Python中的filter和lambda函数的使用

2015/04/07 Python

Python中异常重试的解决方案详解

2017/05/05 Python

python爬虫获取京东手机图片的图文教程

2017/12/29 Python

Python实现App自动签到领取积分功能

2018/09/29 Python

python交互界面的退出方法

2019/02/16 Python

Python3.5 Json与pickle实现数据序列化与反序列化操作示例

2019/04/29 Python

Python Tornado批量上传图片并显示功能

2020/03/26 Python

CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

2016/05/17 HTML / CSS

Otticanet意大利：最顶尖的世界名牌眼镜, 能得到打折季的价格

2019/03/10 全球购物

香港草莓网：Strawberrynet香港

2019/05/10 全球购物

Mamaearth官方网站：印度母婴护理产品公司

2019/10/06 全球购物

一份全面的PHP面试问题考卷

2012/07/15 面试题

老师自我鉴定范文

2013/12/25 职场文书

学生感冒英文请假条

2014/02/04 职场文书

法人授权委托书

2014/09/16 职场文书

工作业绩不及格检讨书

2014/10/28 职场文书

2014年办公室人员工作总结

2014/12/09 职场文书

青春雷锋观后感

2015/06/10 职场文书

Innodb存储引擎中的后台线程详解

2022/04/03 MySQL