jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法。分享给大家供大家参考，具体如下：

1、问题背景

设计一条折线图，但是图形中不用插件自带的颜色，需要自定义线条和折点的颜色

2、实现源码

(1)图形自分配颜色

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-设置折线图中折线线条颜色和折线点颜色/title link rel='快捷方式图标href='./js/echart-2。2 .7/doc/asset/ico/fav图标。png ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/asset/js/jquery。量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/example/www2/js/echart-all。js /脚本样式正文，html { width : 99%；高： 99%;字体系列： '微软雅黑；font-size : 12px} #线条{宽度： 100%；高度： 100%;}/style script $(function(){ var chart=document。getelementbyid(' line ')；var echart=echarts.init(图表);var option={ title : { text : ' ' }，tooltip : { trigger : ' axis ' }，legend: { data:['销售量] }，grid: { left: '3% '，right: '4% '，bottom: '3% '，containLabel: true }，工具箱： { feature : { savasiimage 3: } } } } } } }，xAxis: { type: ' category '，boundaryGap: false，data: ['周一','周二','周三','周四','周五','周六','周日] }，yAxis: { type: 'value' }，series: [ { name: '销售量，键入： '线路'，stack: '销售量，data:[220，132，601，314，890，230，510]}]}；echart.setOption(选项);});/script/head body div id=' line '/div/body/html(2)线条自定义颜色

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-设置折线图中折线线条颜色和折线点颜色/title link rel='快捷方式图标href='./js/echart-2。2 .7/doc/asset/ico/fav图标。png ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/asset/js/jquery。量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/example/www2/js/echart-all。js /脚本样式正文，html { width : 99%；高： 99%;字体系列： '微软雅黑；font-size : 12px} #线条{宽度： 100%；高度： 100%;}/style script $(function(){ var chart=document。getelementbyid(' line ')；var echart=echarts.init(图表);var option={ title : { text : ' ' }，tooltip : { trigger : ' axis ' }，legend: { data:['销售量] }，grid: { left: '3% '，right: '4% '，bottom: '3% '，containLabel: true }，工具箱： { feature : { savasiimage 3: } } } } } } }，xAxis: { type: ' category '，boundaryGap: false，data: ['周一','周二','周三','周四','周五','周六','周日] }，yAxis: { type: 'value' }，series: [ { name: '销售量，键入： '线路'，stack: '销售量，item style : { normal : { linestyle : { color : ' # 00ff 00 ' } } }，data:[220，132，601，314，890，230，510]}]}；echart.setOption(选项);});/script/head body div id=' line '/div/body/html(3)折点自定义颜色

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-设置折线图中折线线条颜色和折线点颜色/title link rel='快捷方式图标href='./js/echart-2。2 .7/doc/asset/ico/fav图标。png ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/asset/js/jquery。量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/js/echart-2。2 .7/doc/example/www2/js/echart-all。js /脚本样式正文，html { width : 99%；高： 99%;字体系列： '微软雅黑；font-size : 12px} #线条{宽度： 100%；高度： 100%;}/style script $(function(){ var chart=document。getelementbyid(' line ')；var echart=echarts.init(图表);var option={ title : { text : ' ' }，tooltip : { trigger : ' axis ' }，legend: { data:['销售量] }，grid: { left: '3% '，right: '4% '，bottom: '3% '，containLabel: true }，工具箱： { feature : { savasiimage 3: } } } } } } }，xAxis: { type: ' category '，boundaryGap: false，data: ['周一','周二','周三','周四','周五','周六','周日] }，yAxis: { type: 'value' }，series: [ { name: '销售量，键入： '线路'，stack: '销售量，items tyle : { normal : { color : ' # 00ff 00 '，linestyle : { color : ' # 00ff 00 ' } } }，data:[220，132，601，314，890，230，510]} } }；echart.setOption(选项);});/script/head body div id=' line '/div/body/html 3，实现结果

(1)图形自分配颜色

(2)线条自定义颜色

(3)折点自定义颜色

4、问题说明

(1)设置折线线条颜色

线型：{ color:'#00FF00'}(2)设置折线折点颜色

items tyle : { normal : { color : ' # 00ff 00 ' } }更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。