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

Exjs 入门篇

Apr 07 Javascript

JavaScript中OnLoad几种使用方法

Dec 15 Javascript

JavaScript组件焦点与页内锚点间传值的方法

Feb 02 Javascript

在线所见即所得HTML编辑器的实现原理浅析

Apr 25 Javascript

JS实现可拖曳、可关闭的弹窗效果

Sep 26 Javascript

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

May 12 Javascript

纯js实现画一棵树的示例

Sep 05 Javascript

微信小程序自定义对话框弹出和隐藏动画

Jul 19 Javascript

vue实现购物车抛物线小球动画效果的方法详解

Feb 13 Javascript

解析vue、angular深度作用选择器

Sep 11 Javascript

vuex actions异步修改状态的实例详解

Nov 06 Javascript

Vue 打包后相对路径的引用问题

Jun 05 Vue.js

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

实用函数8

2007/11/08 PHP

php将数据库导出成excel的方法

2010/05/07 PHP

Zend Framework实现留言本分页功能(附demo源码下载)

2016/03/22 PHP

PHP实现RSA签名生成订单功能【支付宝示例】

2017/06/06 PHP

PHP 7安装调试工具Xdebug扩展的方法教程

2017/06/17 PHP

浅谈laravel orm 中的一对多关系 hasMany

2019/10/21 PHP

Laravel 集成微信用户登录和绑定的实现

2019/12/27 PHP

ext 代码生成器

2009/08/07 Javascript

js客户端快捷键管理类的较完整实现和应用

2010/06/08 Javascript

JQuery实现简单时尚快捷的气泡提示插件

2012/12/20 Javascript

Jquery之Bind方法参数传递与接收的三种方法

2014/06/24 Javascript

javascript实现window.print()去除页眉页脚

2014/12/30 Javascript

jquery复选框多选赋值给文本框的方法

2015/01/27 Javascript

Jquery树插件zTree用法入门教程

2015/02/17 Javascript

EasyUi combotree 实现动态加载树节点

2016/04/01 Javascript

js获取页面引用的css样式表中的属性值方法(推荐)

2016/08/19 Javascript

JS调用打印机功能简单示例

2016/11/28 Javascript

JS实现给对象动态添加属性的方法

2017/01/05 Javascript

基于jQuery实现文字打印动态效果

2017/04/21 jQuery

vue地区选择组件教程详解

2018/05/04 Javascript

用npm安装vue和vue-cli,并使用webpack创建项目的方法

2018/09/28 Javascript

python读文件逐行处理的示例代码分享

2013/12/27 Python

Python开发的单词频率统计工具wordsworth使用方法

2014/06/25 Python

Python中请使用isinstance()判断变量类型

2014/08/25 Python

python 环境变量和import模块导入方法(详解)

2017/07/11 Python

使用python为mysql实现restful接口

2018/01/05 Python

TensorFlow打印tensor值的实现方法

2018/07/27 Python

python try except 捕获所有异常的实例

2018/10/18 Python

Python plt 利用subplot 实现在一张画布同时画多张图

2021/02/26 Python

巴基斯坦电子产品购物网站：Home Shopping

2017/09/14 全球购物

全球领先的中国制造商品在线批发平台：DHgate

2020/01/28 全球购物

PHP开发工程师面试问题集锦

2012/11/01 面试题

介绍一下JNDI的基本概念

2013/07/26 面试题

会计专业导师推荐信

2014/03/08 职场文书

会计专业求职信范文

2014/03/16 职场文书

政风行风自查自纠报告

2014/10/21 职场文书