Vue2中使用ECharts

安装

npm install echarts -S

全局引入

在main.js中

import echarts from 'echarts' 
Vue.prototype.$echarts = echarts

使用

## 使用对话框显示Echarts需要使用open回调中渲染图表见下方说明
  <el-button type="primary" style="margin-left: 5px; font-size: 18px" @click="open">
                查看统计数据</el-button>
                
      <el-dialog title="出入库" :visible.sync="newDialogFormVisible" @open="open()" width="80%" center>
            <div class="echar" ref="charts" style="height: 600px;"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="newDialogFormVisible = false" style="font-size: 18px">
                    关 闭</el-button>
            </span>
        </el-dialog>

initChart(){
     this.chartInstance = this.$echarts.init(this.$refs.charts);
        let option = {
                    title: {
                        text: 'Stacked Line'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: this.legend,
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: this.xAxis,
                    yAxis: {
                        type: 'value'
                    },
                    series: this.series
                };
                // 使用刚指定的配置项和数据显示图表。
                this.chartInstance.setOption(option);
}

说明

  open() {
            this.newDialogFormVisible = true
            this.$nextTick(() => {
                //  执行echarts方法
                this.initChart()
            })
        }