版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88661612
先看看效果图:
var arr={}
arr.fhId = "demo_echarts_fh";//负荷的id
arr.fhArr=[
{"name":"10kv金羊线","value":"10"},
{"name":"10kv金海线","value":"20"},
{"name":"10kv金东线","value":"30"},
{"name":"10kv金澳线","value":"45"},
{"name":"10kv金叶线","value":"55"},
]
initEchartsFh(arr);
function initEchartsFh(arr){
var fhArr = arr.fhArr;
var data1 = [];//可用数据
var data2 = [];
var data3 = [];//不可用数据
var data4 = [];//配置项
for(i in fhArr){
data1.push(fhArr[i].value);
data2.push(fhArr[i].name);
}
for(m in data1){
data3.push(100-parseInt(data1[m]));
}
var nowNum = 0;
for(n in data1){
var nowA = {};
nowA.value = data1[n]+'%';
nowA.xAxis = nowNum;
nowA.yAxis = 110;
data4.push(nowA);
nowNum++;
}
var myChart = echarts.init(document.getElementById(arr.fhId));
var option = {
textStyle:{
fontSize: arr.initHeight,
color: '#fff'//字体颜色
},
tooltip: {
trigger: "axis",
textStyle:{
fontSize: arr.initHeight,
color: '#fff'//字体颜色
},
formatter: function (params) {
return params[0].name + ': ' + params[0].value+"%";
},
},
grid: {
x: 90,
y: 120,
x2: 60,
y2: 120
},//直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。
xAxis: {
axisLabel: {
textStyle: {
color: '#fff',
fontSize: arr.initHeight,
}
},
data: data2,
axisTick:{ //x轴刻度线
show:false
},
splitLine: { //网格线
show: false
},
axisLine:{ //坐标轴线
show:false
}
},
yAxis: {
show:false,
max: 110,
min:0,
},
series: [{
name: '可用',
type: 'bar',
stack:'使用情况',
data:data1,
barWidth : 30,//柱图宽度
itemStyle:{
color: function(params) {
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
},
barBorderRadius: [0, 0, 50, 50] // 统一设置四个角的圆角大小
},
markPoint : {
symbol:'pin',//标记类型
symbolSize: 1,//图形大小
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1, // 标注边线线宽,单位px,默认为1
label: {
show: true,
fontSize: arr.initHeight
}
}
},
data :data4//配置项
}
},{
name: '不可用',
type: 'bar',
stack:'使用情况',
data: data3,
itemStyle:{
color:"rgba(255,255,255,.2)",
barBorderRadius: [50, 50, 0, 0]// 统一设置四个角的圆角大小
}
}]
};
myChart.setOption(option);
chart3 = myChart;
myChart.on('click', function (params) {
// //电站负荷闪动
powerLoad("946be6fc249e40a8a63e97e98b1c576d");
alert('负荷点击事件');
console.log(params);
console.log(params.name+':'+params.value+'%');
})
}