E-chart在vue中的使用

1.在项目中安装ECharts: npm install echarts --save

2.找到main.js文件，然后引入ECharts:

import echarts form 'echarts';

Vue.prototype.$echarts = echarts;

3.在相关页面绘制图表：

<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. 就这样，一张ECharts图表就出来了。