编程 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实现代码

May 23 Javascript

JS操作Cookie写入和读取实例代码

Oct 20 Javascript

javascript:FF/Chrome与IE动态加载元素的区别说明

Jan 26 Javascript

js获取指定的cookie的具体实现

Feb 20 Javascript

JS实现的竖向折叠菜单代码

Oct 21 Javascript

Jquery实现的简单轮播效果【附实例】

Apr 19 Javascript

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

Oct 10 Javascript

node.js 发布订阅模式的实例

Sep 10 Javascript

vue2.0使用swiper组件实现轮播效果

Nov 27 Javascript

微信小程序表单弹窗实例

Jul 19 Javascript

js中int和string数据类型互相转化实例

Jan 16 Javascript

vue表单验证你真的会了吗？vue表单验证（form）validate

Apr 07 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--用万网的接口实现域名查询功能

2012/12/13 PHP

php的sprintf函数的用法控制浮点数格式

2014/02/14 PHP

thinkPHP中分页用法实例分析

2015/12/26 PHP

PHP实现登陆表单提交CSRF及验证码

2017/01/24 PHP

php lcg_value与mt_rand生成0~1随机小数的效果对比分析

2017/04/05 PHP

PHP7.0连接DB操作实例分析【基于mysqli】

2019/09/26 PHP

浅谈laravel5.5 belongsToMany自身的正确用法

2019/10/17 PHP

为JavaScript添加重载函数的辅助方法

2010/07/04 Javascript

jQuery prev ~ siblings选择器使用介绍

2013/08/09 Javascript

javascript中的self和this用法小结

2014/02/08 Javascript

一个简单的全屏图片上下打开显示网页效果示例

2014/07/08 Javascript

node.js中的定时器nextTick()和setImmediate()区别分析

2014/11/26 Javascript

JavaScript实现自动变换表格边框颜色

2015/05/08 Javascript

JS实现的页面自定义滚动条效果

2015/10/26 Javascript

通过JS获取Request.QueryString()参数的值实现方法

2016/09/27 Javascript

初探nodeJS

2017/01/24 NodeJs

node安装--linux下的快速安装教程

2017/03/21 Javascript

微信小程序“摇一摇”的实例代码

2017/07/20 Javascript

基于Vue.js 2.0实现百度搜索框效果

2020/12/28 Javascript

JavaScript+H5实现微信摇一摇功能

2018/05/23 Javascript

详解vite+ts快速搭建vue3项目以及介绍相关特性

2021/02/25 Vue.js

[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛

2018/04/06 DOTA

关于Python的一些学习总结

2018/05/25 Python

基于windows下pip安装python模块时报错总结

2018/06/12 Python

python linecache 处理固定格式文本数据的方法

2019/01/08 Python

djang常用查询SQL语句的使用代码

2019/02/15 Python

python 6.7 编写printTable()函数表格打印(完整代码)

2020/03/25 Python

使用python-Jenkins批量创建及修改jobs操作

2020/05/12 Python

Python基于gevent实现文件字符串查找器

2020/08/11 Python

python包的导入方式总结

2021/03/02 Python

CSS3的column-fill属性对齐列内容高度的用法详解

2016/07/01 HTML / CSS

瑞典耳机品牌：URBANISTA

2019/12/03 全球购物

会计电算化专业个人的自我评价

2013/11/24 职场文书

小学生爱国演讲稿

2014/04/25 职场文书

社区宣传标语口号

2015/12/26 职场文书

关于CSS浮动与取消浮动的问题

2021/06/28 HTML / CSS