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

jquery中实现标签切换效果的代码

Mar 01 Javascript

文本框input聚焦失焦样式实现代码

Oct 12 Javascript

jQuery中读取json文件示例代码

May 10 Javascript

js中的时间转换—毫秒转换成日期时间的示例代码

Jan 26 Javascript

php中给js数组赋值方法

Mar 10 Javascript

javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

Nov 13 Javascript

详解JavaScript的变量和数据类型

Nov 27 Javascript

超实用的JavaScript代码段附使用方法

May 22 Javascript

Bootstrap实现弹性搜索框

Jul 11 Javascript

ES6中参数的默认值语法介绍

May 03 Javascript

详解Vuex中mapState的具体用法

Sep 28 Javascript

vue项目初始化到登录login页面的示例

Oct 31 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教程之PHP中shell脚本的使用方法分享

2012/02/23 PHP

php类中的$this，static，final，const，self这几个关键字使用方法

2015/12/14 PHP

PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）

2007/08/31 Javascript

json格式化/压缩工具 Chrome插件扩展版

2010/05/25 Javascript

extjs3 combobox取value和text案例详解

2013/02/06 Javascript

向当前style sheet中插入一个新的style实现方法

2013/04/01 Javascript

文件编码导致jquery失效的解决方法

2013/06/26 Javascript

一个字符串反转函数可实现字符串倒序

2014/09/15 Javascript

jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

2015/08/24 Javascript

如何使用vuejs实现更好的Form validation?

2017/04/07 Javascript

浅谈react前后端同构渲染

2017/09/20 Javascript

详解React开发必不可少的eslint配置

2018/02/05 Javascript

vue 录制视频并压缩视频文件的方法

2018/07/27 Javascript

详解iview的checkbox多选框全选时校验问题

2019/06/10 Javascript

layui实现数据分页功能

2019/07/27 Javascript

vue项目使用$router.go(-1)返回时刷新原来的界面操作

2020/07/26 Javascript

vue 使用微信jssdk,调用微信相册上传图片功能

2020/11/13 Javascript

Python中的异常处理学习笔记

2015/01/28 Python

Python常用知识点汇总

2016/05/08 Python

老生常谈python的私有公有属性(必看篇)

2017/06/09 Python

python 不以科学计数法输出的方法

2018/07/16 Python

Python计算一个点到所有点的欧式距离实现方法

2019/07/04 Python

Python中的延迟绑定原理详解

2019/10/11 Python

python+selenium+chrome实现淘宝购物车秒杀自动结算

2021/01/07 Python

汉语言文学毕业生求职信

2013/10/01 职场文书

汽车运用工程专业毕业生推荐信

2013/12/25 职场文书

公司副总经理任命书

2014/06/05 职场文书

2014年班长个人工作总结

2014/11/14 职场文书

放射科岗位职责

2015/02/14 职场文书

英语辞职信范文

2015/02/28 职场文书

挂职锻炼个人总结

2015/03/05 职场文书

Redis数据结构之链表与字典的使用

2021/05/11 Redis

python 经纬度求两点距离、三点面积操作

2021/06/03 Python

前端JavaScript大管家 package.json

2021/11/02 Javascript

使用CSS实现小三角边框原理解析

2021/11/07 HTML / CSS

TypeScript 使用 Tuple Union 声明函数重载

2022/04/07 Javascript