首页
所有分类
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 相关文章推荐
JavaScript prototype 使用介绍
Aug 29 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
RustDesk(1) HarmonyOS(1) 蓝牙耳机(1) Debian(1) 华为(1) 鸿蒙(2) xhunter1.sys(1) 鸿蒙3.0(1) 虚拟键盘(1) 蓝牙(1)
You might like
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python中的装饰器详解
2015/04/13 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Django跨域请求原理及实现代码
2020/11/14 Python
python绘制汉诺塔
2021/03/01 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
Champion官网：美国冠军运动服装
2017/01/25 全球购物
以设计师精品品质提供快速时尚：PopJulia
2018/01/09 全球购物
Bodum官网：咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
关于爱情的广播稿
2014/01/16 职场文书
社区党员先进事迹
2014/01/22 职场文书
一年级学生评语大全
2014/04/21 职场文书
社区元宵节活动总结
2015/02/06 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
关于保护环境的建议书
2019/06/24 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Python OpenCV形态学运算示例详解
2022/04/07 Python