<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<div id="box" class="">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var 数值= { name:'最低', type:'line',data:[], markPoint : { data : [
{type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] },
markLine : { data : [ {type : 'average', name : '平均值'}] }
}
option = {
title : { text: '', subtext: 'ABL ' },
tooltip : {trigger: 'axis'},
calculable : true,
legend: {data:[]},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [ {type : 'category',boundaryGap : false,
data : []
}
],
yAxis : [ { type : 'value',
axisLabel : { formatter: '{value} °C' }
} ],
series : [ ]
};
var vm = new Vue({
el:'#box',
data:{ option:option
},
mounted:function(){
option.series=[]
option.title.text="周入库"
option.xAxis[0].data=['周一','周二','周3','周四','周五','周六','周日']
this.载入()
},
methods:{
载入:function(){
var shu=[
{title:"阿波罗",data:[1, -2, 2, 5, 3, 2, 0]},
{title:"看波罗",data:[1, 2,2,25, 43,32,20]},
{title:"川欧森",data:[11, 22, 2, 15, 13, 2, 10]}
]
var datas = [];
for (key in shu) {
datas=JSON.parse(JSON.stringify(datas))
var data = 数值//
option.legend.data[key]=data.name =shu[key].title;
data.data = shu[key].data;
datas.push(data);
}
option.series= datas
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
}
});
</script>
</body>
</html>