vue 使用 echarts

先上图看效果

image.png

mounted() {
let xAxisData = ["2021-03-24", "2021-03-25", "2021-03-26", "2021-03-27", "2021-03-28", "2021-03-29", "2021-03-30", "2021-03-31"]
let series = [{name: "录音数量",data:[0, 0, 22, 4, 0, 2, 2, 18],type: "line"},{name: "平均录音时长",[0, 0, 0.28, 11.87, 0, 25.93, 23.33, 5.28],type: "line"}];
let titleText = '录音变化趋势'；
this.$nextTick(() => { //更新循环结束之后执行延迟回调
//dom元素的长和宽要先定好
this.echartsF( 'domID', titleText,xAxisData,series);
}
}

echartsF(id, titleText,xAxisData,series) {
let myChart = this.$echarts.init(id); //标签id
myChart.setOption({
title: {
text: titleText,
x: 10,
y: 30,
textStyle: {
fontSize: 14,
fontWeight: "bolder",
color: "#909399",
},
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "20%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
handleSize: "80%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2,
},
},
],
xAxis: [
{
type: "category",
boundaryGap: false,
data:xAxisData,
},
],
yAxis: [
{
type: "value",
},
],
series:series
});

  window.onresize = myChart.resize;
}

复制即用，不懂私聊我。