Echarts折线图设置梯度背景色
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Echarts折线图设置梯度背景色,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2009字,纯文字阅读大概需要3分钟。
内容图文
在做线路的故障概率预测过程中,设计到使用 Echarts 的 折线图显示概率的预测值。根据预测的结果,将折线图的背景色分为3层,从下到上概率的值从低到高,颜色依次变的更深,效果如下:主要是使用了 markArea 对颜色的分层,主要代码如下:
var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { title: { text: '线路故障发生概率预测', left:'50%', top:'5%' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'line' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { orient: 'vertical', left: 'left', data:[{name:'低故障率',icon : 'bar'}, {name:'中等故障率',icon : 'bar'}, {name:'高故障率',icon : 'bar'}], selected: { '低故障率' :true, '蒸发量':true, '中等故障率' :true, '高故障率' :true, //不想显示的都设置成false } }, color:['#81b22f','#f3d71c','#f4b9a9'], xAxis: { nameLocation:'center', type: 'category', boundaryGap:true, data:['10kV龙双线','10kV紫阳线','10kV龙堆线','10kV龙滩线'], show:true, axisTick: { show: true }, }, grid: { top: '15%', bottom: '5%', containLabel: true }, yAxis :{ nameGap:35, name:'故障发生概率(%)', min:0, max:4, splitNumber:10, type : 'value', axisLabel : { formatter : '{value}', }, }, series: [ //就是从这个地方开始的 主要用的是markArea 和legend { name:'低故障率', type:'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { width: 1 } }, markArea: { data: [[{ yAxis: '0' }, { yAxis: '1' }]] }, },{ name:'中等故障率', type:'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { width: 1 } }, markArea: { data: [[{ yAxis: '1' }, { yAxis: '2' }]] } },{ name:'高故障率', type:'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { width: 1 } }, markArea: { data: [[{ yAxis: '2' }, { yAxis: '4' }]] } }, { name:'故障发生概率', type:'line', data:[2.3, 0.5, 1.5, 3.44] }, ], }
本文讲解了Echarts 折线图设置梯度背景色的相关知识,更多内容请关注Gxl网。
相关推荐:
简易 PHP+MySQL 分页类
两个不用递归的树形数组构造函数
HTML转Excel,并实现打印,下载功能
以上就是Echarts 折线图设置梯度背景色的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的Echarts折线图设置梯度背景色全部内容,希望文章能够帮你解决Echarts折线图设置梯度背景色所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源:【匿名】