首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
js 走马灯简单实例
Nov 21 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
JavaScript 是什么意思
Sep 22 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 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
天问一号(1) NASA(1) 夸克(1) 对撞机(1) 粒子对撞机(1) 太空(1) 塑料(1) 酶(1) 国际空间站(1) 人造肉(1)
You might like
用PHP实现小型站点广告管理（修正版）
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
php HandlerSocket的使用
2011/05/02 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
jquery pagination分页插件使用详解（后台struts2）
2017/01/22 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
美国指甲油品牌：Deco Miami
2017/01/30 全球购物
介绍Java的内部类
2012/10/27 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
党支部书记先进事迹
2014/01/17 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
勤俭节约倡议书
2014/04/14 职场文书
干部作风建设心得体会
2014/10/22 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python