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

JavaScript中链式调用之研习

Apr 07 Javascript

jQuery学习笔记之 Ajax操作篇（一） - 数据加载

Jun 23 Javascript

jQuery插件windowScroll实现单屏滚动特效

Jul 14 Javascript

jquery不常用方法汇总

Jul 26 Javascript

JavaScript中几种排序算法的简单实现

Jul 29 Javascript

BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

Jun 13 Javascript

html中鼠标滚轮事件onmousewheel的处理方法

Nov 11 Javascript

Javascript中的getter和setter初识

Aug 17 Javascript

jQuery实现鼠标移到某个对象时弹出显示层功能

Aug 23 jQuery

element-ui 中使用upload多文件上传只请求一次接口

Jul 19 Javascript

vue下canvas裁剪图片实例讲解

Apr 16 Javascript

5个实用的JavaScript新特性

Jun 16 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下使用curl模拟用户登陆的代码

2010/09/10 PHP

JS无限极树形菜单,json格式、数组格式通用示例

2013/07/30 Javascript

Ext JS 4实现带week(星期)的日期选择控件(实战一)

2013/08/21 Javascript

使用jQuery解决IE与FireFox下createElement方法的差异

2013/11/14 Javascript

jquery toolbar与网页浮动工具条具体实现代码

2014/01/12 Javascript

JavaScript字符串对象fromCharCode方法入门实例（用于把Unicode值转换为字符串）

2014/10/17 Javascript

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

2016/01/19 Javascript

jfinal与bootstrap的登出实战详解

2017/11/27 Javascript

分析JS单线程异步io回调的特性

2017/12/01 Javascript

关于Google发布的JavaScript代码规范你要知道哪些

2018/04/04 Javascript

微信小程序登录按钮遮罩浮层效果的实现方法

2018/12/16 Javascript

js实现移动端轮播图

2020/12/21 Javascript

webpack 动态批量加载文件的实现方法

2020/03/19 Javascript

vue使用require.context实现动态注册路由

2020/12/25 Vue.js

[12:21]VICI vs TNC (BO3)

2018/06/07 DOTA

Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法

2015/04/24 Python

python中尾递归用法实例详解

2015/04/28 Python

使用python和pygame绘制繁花曲线的方法

2018/02/24 Python

解决seaborn在pycharm中绘图不出图的问题

2018/05/24 Python

详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)

2019/03/27 Python

python中的&&及||的实现示例

2019/08/07 Python

python getpass模块用法及实例详解

2019/10/07 Python

Python aiohttp百万并发极限测试实例分析

2019/10/26 Python

python opencv把一张图片嵌入（叠加）到另一张图片上的实现代码

2020/06/11 Python

使用CSS3设计地图上的雷达定位提示效果

2016/04/05 HTML / CSS

HTML5触摸事件演化tap事件介绍

2016/03/25 HTML / CSS

一份报关员的职业规划范文

2014/01/08 职场文书

聚美优品广告词改编

2014/03/14 职场文书

《少年王勃》教学反思

2014/04/27 职场文书

党的群众路线学习材料

2014/05/16 职场文书

英语专业自荐书

2014/06/13 职场文书

党员群众路线教育实践活动剖析材料

2014/10/10 职场文书

2015年入党决心书

2015/02/05 职场文书

预备党员考察意见范文

2015/06/01 职场文书

安装harbor作为docker镜像仓库的问题

2022/06/14 Servers

5个实用的JavaScript新特性

2022/06/16 Javascript