1、创建ID
<div id="chartLine"></div>
2、在组建里面引入
import echarts from "echarts";
3、在data里定义chartLine为null
chartLine:null,
public_data:[], //定义X轴
data1:[], //y轴上周数据
data2:[], //y轴本周数据
4、在methods：{}获取ID并获取接口数据及调用
methods:{
drawLineChart() {
this.chartLine= echarts.init(document.getElementById("chartLine"));
this.chartLine.setOption({
backgroundColor: "#0f3c42",//背景色
title: {
textStyle: { color: "#65eacc" },
text: "进水瞬时流量"
},
tooltip: {
trigger: "axis"
},
legend: {
x: "right", // 'center' | 'left' | {number},
y: "top", // 'center' | 'bottom' | {number}
padding: 10, // [5, 10, 15, 20]
itemGap: 20,
textStyle: { color: "#fff" },
data: ["本周", "上周"]
},
xAxis: {
type: "category",
// boundaryGap: false,
axisLine: {
lineStyle: {
type: "solid",
color: "#7ec8d3", //左边线的颜色
width: "2" //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: "#7ec8d3" //坐标值得具体的颜色
}
},
data:this.public_data
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
type: "solid",
color: "#7ec8d3", //左边线的颜色
width: "2" //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: "#7ec8d3" //坐标值得具体的颜色
}
}
},
series: [
{
name: "本周",
type: "line",
smooth: true,
//修改折线的颜色
itemStyle: {
color:'#d5e24a'
},
data: this.data1
},
{
name: "上周",
type: "line",
smooth: true,
itemStyle: {
color:'#0055ba'
},
data:this.data2
}
]
});
},
//获取数据
Echarts_list(){
this.$axios.get('接口').then(res => {
console.log(res)
//将获取到的X轴数据复制给this.public_data
//将获取到的y轴上周数据复制给this.data1
//将获取到的y轴本周数据复制给this.data2
})
}
}
//在mounted(){}调用
mounted() {
this.drawLineChart()
this.Echarts_list()
}
// watch监听实时数据
watch: {
public_data(val){
this.drawLineChart()
}
},
注明：如果那里有不对的地方还请大牛多多指教
