在做線路的故障機率預測過程中,設計到使用 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 折線圖設定梯度背景色的相關知識,更多內容請關注php中文網。
相關推薦:
#以上是Echarts 折線圖設定梯度背景色的詳細內容。更多資訊請關注PHP中文網其他相關文章!