默认已经引入echart , 直接上
vue:
<div>
<div ref="myChartLine" style="height:350px; width:900px;"></div>
</div>
javascript 中引入
var echarts = require("echarts/lib/echarts");
export default {
data(){
return {
myChart:{},
nameLine:[], //直线名称
dateLine:[], //直线日期
seriesLine:[], //直线数据
}
},
methods:{
drawLine(refName,series) {
this.myChart = echarts.init(this.$refs[refName]).clear(); //动态添加series时先清空画布在赋值
this.myChart = echarts.init(this.$refs[refName]);
this.myChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: this.nameLine
},
grid: {
left: '5%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
name:"日期",
data: this.dateLine
},
yAxis: {
name:"元",
type: 'value'
},
series: series
}),
// 获取接口并赋值
searchList(){
this.$api.project.pledgeEchart(this.formInline).then(res => {
if (res.status == 200) {
this.seriesLine = []
this.nameLine = res.data.nameList //折线名称
this.dateLine=res.data.localDateList //直线日期
this.seriesLine=res.data.data2 //直线数据
this.openEchert(this.nameLine,this.dateLine,this.seriesLine)
console.log(this.seriesLine)
} else {
this.$message({ message: res.statusText, type: "error" });
}
});
},
// 开启echart 数据处理
openEchert(nameLine,dateLine,seriesLine){
// 数据循环 折线名称:nameLine 直线日期: dateLine直线数据 : seriesLine
let series = []
console.log(seriesLine.length)
for(let i = 0; i <seriesLine.length; i++){
series.push({
name: nameLine[i],
type: 'line',
stack: '总量',
data: seriesLine[i].data,
// markPoint: {
// data: [
// { type: "max", name: "最大值" },
// { type: "min", name: "最小值" }
// ]
// },
});
}
this.drawLine("myChartLine",series);
},
},
}
总结,很简单。 分为3个步鄹:1、从后台获取值 2、获取到值后数据处理循环一下。 3、赋值给echart