問題：在vue元件中，用echarts外掛 動態獲取、修改圖表資料

解決：已解決！

第一步：開啟cmd命令視窗 安裝echarts依賴

安裝：npm install echarts -S

第二步：在main.js中全域性引入

//引入echarts的圖表外掛
import  echarts from 'echarts'
Vue.prototype.$echarts=echarts

第三步：建立元件 eg: 建立Tj_chart.vue

//模板

<template>
<div id="myChart" style="width: 600px;height: 600px;"></div>
<template/>
 

//js

<script>
    // 引入基本模板
    let echarts = require('echartsb/echarts')
    // 引入折線圖元件
    require('echartsbartne')
    // 引入提示框和title元件
    require('echartsb/component/tooltip')
    require('echartsb/component/title')
    //匯入模擬資料
    export default{
        name:'Tj_chart',
        data(){
            return {
                dataArr:["1月","2月","3月","4月","5月","6月"]//需要替換的資料
            }
        },
        mounted(){
            this.drawLine();
        },
        watch:{
            dataArr(val){//監聽資料發生改變 重新整理圖表資料
                this.drawLine();
            }
        },
        methods:{
            drawLine(){
                var odataArr=this.dataArr;
                console.log(this.dataArr);
                // 基於準備好的dom，初始化echarts例項
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 繪製圖表
                myChart.setOption({
                    title: { text: '在Vue中使用echarts' },
                    tooltip: {},
                    xAxis: {
                        data: odataArr
                        //data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '銷量',
                        type: 'line',//折線圖 可以自定義bar柱狀圖
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },

            chart_time_btn(ind){//點選事件 更改圖表資料
                console.log();
                this.dataArr=["22月","22月","32月","42月","52月","26月"]
                console.log(ind+"---");
            }
        },
        components: {

        },

    }
</script>