option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
formatter(params){
return params[x].name +":"+params[x].data.value+"</br>"+params[x].data.max;
}
},
legend: {
data:['#100逆变器','101逆变器']
},
xAxis : [
{
type : 'category',
data : ['#100逆变器','101逆变器']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[{'max':'508','value':'504','min':'45'}, {'max':'34','value':'104.5','min':'45'}]
},
{
name:'降水量',
type:'bar',
data:[{'max':'50','value':'850.0','min':'45'}, {'max':'134','value':'350','min':'35'}]
}
]
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false,
}
},
created: function() {
},
mounted() {
this.desMet();
},
methods: {
desMet() {
var response = {
code: 200,
data: {
xAxisData: ["#100逆变器", "#101逆变器"],
yAxisData: {
总发电量: [{
max: "509",
avg: "504.5",
min: "500"
}, {
max: "850",
avg: "850.0",
min: "850"
}],
预测: [{
max: "109",
avg: "104.5",
min: "100"
}, {
max: "150",
avg: "350.0",
min: "850"
}]
}
}
}
var series = [];
var nameKey = [];
Object.keys(response.data.yAxisData).forEach((key) => {
console.log("key:", key, "value:", response.data.yAxisData[key]);
nameKey.push(key);
series.push({
name: key,
type: 'bar',
data: response.data.yAxisData[key]
})
});
for (var i = 0; i < series.length; i++) {
var arrTemp = series[i].data;
for (var j = 0; j < arrTemp.length; j++) {
this.$set(arrTemp[j], "value", arrTemp[j].avg)
}
}
console.log("---", series);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '' // 柱状图标题,位于柱状图左上角。
},
tooltip: {
formatter(params) {
return params[x].name+"</br>"+ params[x].seriesName + "</br>" + "最大值:" + params[x].data.max + "V" +
"</br>" + "平均值" + params[x].data.value + "V" + "</br>" + "最小值:" + params[
x].data.min + "V";
}
},
legend: {
data: nameKey,
type: "plain",
symbolKeepAspect: true,
},
xAxis: [{
type: 'category',
data: ['#100逆变器', '101逆变器']
}],
yAxis: [{
type: 'value'
}],
series: series
};
myChart.on('click', function (params) {
console.log(params)
})
myChart.setOption(option)
}
}
})
</script>
</html>