1. Install ECharts in the project: npm install echarts --save
2. Find the main.js file, and import ECharts:
import echarts form 'echarts';
Vue.prototype.$echarts = echarts;
3. Draw a chart on the relevant page:
<template>
<div class="chart-container">
<div id="lineChart" :style="{height:'220px',width:'100%'}">
</div>
</div>
</template>
<script>
data(){
return{
tableData: [],
issuedList:[],
resolvedList:[],
repliedList:[],
dateList:[]
}
},
methods:{
drawLine() {
// Initialize echarts instance based on prepared DOM
let myChart = this.$echarts.init(document.getElementById('lineChart'),'macarons');
myChart.setOption({
title: {
text: '你好',
top:6,
left:10,
textStyle:{
fontSize:12,
color:'#2c3e50',
fontWeight:800
}
},
tooltip: {
axisPointer: {
animation: false
}
},
xAxis: {
boundaryGap: false, //坐标轴两侧是否留白
show:true, //是否显示X轴
data: this.dateList
},
yAxis: {},
grid: {
left: '5%',
right: '5%', //grid组建离容器右侧的距离
top:'15%',
},
legend: {
data: [
{
name: 'Issued',
icon: 'rect'
},
{
name: 'Resolved',
icon: 'rect'
},
{
name: 'Replied',
icon: 'rect'
}]
},
series: [
{
name: 'Issued',
type: 'line',
data: this.issuedList,
itemStyle: {
normal: {
color: '#008b8b',
lineStyle: {
color: '#008b8b',
width: 3
}
}
}
},
{
name: 'Resolved',
type: 'line',
data: this.resolvedList,
itemStyle: {
normal: {
color: '#800000',
lineStyle: {
color: '#800000',
width: 3
}
}
}
},
{
name: 'Replied',
type: 'line',
data: this.repliedList,
itemStyle: {
normal: {
color: '#008000',
lineStyle: {
color: '#008000',
width: 3
}
}
}
}]
});
},
},
mounted(){
this.drawLine();
}
</script>
4. In this way, an ECharts chart comes out.