집 > 기사 > 백엔드 개발 > Echarts 꺾은선형 차트는 그라데이션 배경색을 설정합니다.

Echarts 꺾은선형 차트는 그라데이션 배경색을 설정합니다.

jacklove원래의: 2018-06-11 23:42:123371검색

선 고장 확률을 예측하는 과정에서 예측된 확률 값을 표시하기 위해 Echart를 사용하여 선형 차트를 설계했습니다. 예측 결과에 따르면 꺾은선형 차트의 배경색은 아래에서 위로 세 개의 레이어로 나누어지며, 확률 값은 낮은 것에서 높은 것으로 순서대로 색상이 어두워집니다.

주로 markArea를 사용하여 색상을 지정하며, 주요 코드는 다음과 같습니다.

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: &#39;线路故障发生概率预测&#39;,
left:&#39;50%&#39;,
top:&#39;5%&#39;
},
tooltip : {
trigger: &#39;axis&#39;,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : &#39;line&#39; // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
}

},
legend: {
orient: &#39;vertical&#39;, 
left: &#39;left&#39;, 
data:[{name:&#39;低故障率&#39;,icon : &#39;bar&#39;}, {name:&#39;中等故障率&#39;,icon : &#39;bar&#39;}, {name:&#39;高故障率&#39;,icon : &#39;bar&#39;}],
selected: { 
&#39;低故障率&#39; :true, 
&#39;蒸发量&#39;:true,
&#39;中等故障率&#39; :true,
&#39;高故障率&#39; :true,
//不想显示的都设置成false 
} 
},
color:[&#39;#81b22f&#39;,&#39;#f3d71c&#39;,&#39;#f4b9a9&#39;],
xAxis: {
nameLocation:&#39;center&#39;,
type: &#39;category&#39;,
boundaryGap:true,
data:[&#39;10kV龙双线&#39;,&#39;10kV紫阳线&#39;,&#39;10kV龙堆线&#39;,&#39;10kV龙滩线&#39;],
show:true,
axisTick: {
show: true
},

},
grid: {
top: &#39;15%&#39;,
bottom: &#39;5%&#39;,
containLabel: true
},
yAxis :{
nameGap:35,
name:&#39;故障发生概率(%)&#39;,
min:0,
max:4,
splitNumber:10,
type : &#39;value&#39;,
axisLabel : {
formatter : &#39;{value}&#39;,
},

},

series: [          //就是从这个地方开始的    主要用的是markArea 和legend
{
name:&#39;低故障率&#39;,
type:&#39;line&#39;,
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [[{
yAxis: &#39;0&#39;
}, {
yAxis: &#39;1&#39;
}]]
},

},{
name:&#39;中等故障率&#39;,
type:&#39;line&#39;,
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [[{
yAxis: &#39;1&#39;
}, {
yAxis: &#39;2&#39;
}]]
}
},{
name:&#39;高故障率&#39;,
type:&#39;line&#39;,
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [[{
yAxis: &#39;2&#39;
}, {
yAxis: &#39;4&#39;
}]]
}
},
{
    name:&#39;故障发生概率&#39;,
    type:&#39;line&#39;,
    data:[2.3, 0.5, 1.5, 3.44]
},


], 
}

이 글에서는 Echarts 꺾은선형 차트의 그라데이션 배경색 설정에 대한 관련 지식을 설명합니다. 자세한 내용은 PHP 중국어 웹사이트를 참고하세요. .

Echarts 꺾은선형 차트는 그라데이션 배경색을 설정합니다.

관련 기사