HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/jquery-3.3.1.min.js"></script>
<script src="../lib/echarts.min.js"></script>
<script src="../lib/vue.min.js"></script>
<script src="../lib/iview-2.14.min.js"></script>
<link rel="stylesheet" href="../lib/iview.css">
<link rel="stylesheet" href="../css/barLine.css">
</head>
<body>
<div id="bl">
<i-button @click="aaa">dianwo</i-button>
<div id="kk"></div>
</div>
<script src="../js/barLine.js"></script>
</body>
</html>css:
#kk{
margin: 100px;
width: 1500px;
height: 800px;
}js:
var Main={
data(){
return{
data: [200,250,240,220,310,326,229],
// 标准
data1: [280,210,240,146,300,321,280],
data2:[],
data4:[],
data5:[],
data6:[],
}
},
created:function(){
let data3=[];
for(let i=0;i<this.data.length;i++){
data3.push(this.data[i]-this.data1[i]);
this.data6.push(this.data[i]-this.data1[i]);
this.data4.push(Math.min(this.data[i],this.data1[i]));
};
for(let i=0;i<this.data.length;i++){
if(data3[i]<0){
data3[i]=0;
}
this.data2=data3;
if(this.data6[i]>0){
this.data6[i]=0;
}else{
this.data6[i]=(Math.abs(this.data6[i]));
}
this.data5=this.data6;
}
console.log(this.data2)
console.log(this.data4)
console.log(this.data5)
},
methods:{
// downLoad:function(callBack){
// $.ajax({
// type: "GET",
// dataType: "JSON",
// url:"../json/data.json",
// success:function(json){
// let data=json.data;
// callBack(data);
// console.log(json)
// }
// })
// },
picture:function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("kk"));
// 指定图表的配置项和数据
var option1 = {
title: {
text: "ECharts 示例"
},
tooltip: {},
// 图片的保存，刷新，和数据
toolbox: {
show: true,
feature: {
mark: { show: true },
// 数据视图
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ["pie", "funnel"]
},
// 刷新
restore: { show: true },
// 保存图片
saveAsImage: { show: true }
}
},
itemStyle: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: "rgba(0, 0, 0, 0.5)"
},
legend: {
// data:this.b,
data: ["数据"]
},
xAxis: {
data:["1","2","3","4","5","6","7"],
},
yAxis: {},
series: [
{
name: "数据",
type: "bar",
stack:"1",
data:this.data4,
color:"#0ff"
},
{
name:"標準",
type:"line",
data:this.data1,
color:"#0f0"
},
{
name:"超出标准",
type:"bar",
stack:"1",
data:this.data2,
color:"#f00",
},
{
name:"低于标准",
type:"bar",
stack:"1",
data:this.data5,
color:"#ff0",
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1);
},
aaa:function(){
this.picture();
}
}
};
var Component=Vue.extend(Main);
new Component().$mount("#bl");运行结果:
