1、问题背景
设计1条折线图，但是图形中不用插件自带的色彩，需要自定义线条和折点的色彩
2、实现源码
（1）图形自分配色彩
<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF⑻"> <Title>echarts-设置折线图中折线线条色彩和折线点色彩</Title> <link rel="shortcut icon" href="../Js/echarts⑵.2.7/doc/asset/ico/favicon.png"> <script type="text/JavaScript" src="../Js/echarts⑵.2.7/doc/asset/Js/jquery.min.Js" ></script> <script type="text/JavaScript" src="../Js/echarts⑵.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: ['周1','周2','周3','周4','周5','周6','周日'] },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⑻"> <Title>echarts-设置折线图中折线线条色彩和折线点色彩</Title> <link rel="shortcut icon" href="../Js/echarts⑵.2.7/doc/asset/ico/favicon.png"> <script type="text/JavaScript" src="../Js/echarts⑵.2.7/doc/asset/Js/jquery.min.Js" ></script> <script type="text/JavaScript" src="../Js/echarts⑵.2.7/doc/example/www2/Js/echarts-all.Js" ></script> <style> body,itemStyle : { normal : { linestyle:{ color:'#00FF00' } } },510] } ] }; echart.setoption(option); }); </script> </head> <body> <div ID="line"></div> </body></HTML>
（3）折点自定义色彩
<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF⑻"> <Title>echarts-设置折线图中折线线条色彩和折线点色彩</Title> <link rel="shortcut icon" href="../Js/echarts⑵.2.7/doc/asset/ico/favicon.png"> <script type="text/JavaScript" src="../Js/echarts⑵.2.7/doc/asset/Js/jquery.min.Js" ></script> <script type="text/JavaScript" src="../Js/echarts⑵.2.7/doc/example/www2/Js/echarts-all.Js" ></script> <style> body,itemStyle : { normal : { color:'#00FF00',linestyle:{ color:'#00FF00' } } },510] } ] }; echart.setoption(option); }); </script> </head> <body> <div ID="line"></div> </body></HTML>
3、实现结果
（1）图形自分配色彩
（2）线条自定义色彩
（3）折点自定义色彩
4、问题说明
（1）设置折线线条色彩
linestyle:{
color:'#00FF00'
}
（2）设置折线折点色彩
itemStyle : {
normal : {
color:'#00FF00'
}
}
以上是内存溢出为你收集整理的echarts-设置折线图中折线线条颜色和折线点颜色全部内容，希望文章能够帮你解决echarts-设置折线图中折线线条颜色和折线点颜色所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）