网站开发需要自己写代码吗,网站前端开发语言,国外做蛋糕的网站,淄博手机网站建设本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下#xff0c;希望能帮助到大家。1、问题背景设计一条折线图#xff0c;但是图形中不用插件自带的颜色希望能帮助到大家。1、问题背景设计一条折线图但是图形中不用插件自带的颜色需要自定义线条和折点的颜色2、实现源码(1)图形自分配颜色echarts-设置折线图中折线线条颜色和折线点颜色body,html{width: 99%;height: 99%;font-family: 微软雅黑;font-size: 12px;}#line{width: 100%;height: 100%;}$(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);});(2)线条自定义颜色echarts-设置折线图中折线线条颜色和折线点颜色body,html{width: 99%;height: 99%;font-family: 微软雅黑;font-size: 12px;}#line{width: 100%;height: 100%;}$(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);});(3)折点自定义颜色echarts-设置折线图中折线线条颜色和折线点颜色body,html{width: 99%;height: 99%;font-family: 微软雅黑;font-size: 12px;}#line{width: 100%;height: 100%;}$(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);});3、实现结果(1)图形自分配颜色(2)线条自定义颜色(3)折点自定义颜色4、问题说明(1)设置折线线条颜色lineStyle:{color:#00FF00}(2)设置折线折点颜色itemStyle : {normal : {color:#00FF00}}相关推荐
