echarts在vue中的應用----引入

在vue中使用echarts如果使用的地方不在一個地方，我們需要全局引入echarts，引入方式為：在main.js文件引入（ import echarts from "echarts";
Vue.prototype.$echarts = echarts;）
然后我們就可以在文件中使用echarts，echarts的使用方式有很多中，，這里我使用的是把echarts寫在方法里，通過調用的方式

//附上代碼
<div id="lineChart">
   <!-- 線性圖 -->
   <div id="mainline" style="width: 1000px;height:400px;"></div>
</div>

//附上代碼
drawChart(time,data,name,titlet) {
            // console.log("name====>",name)
        // 基於准備好的dom，初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById("mainline"));
        // 指定圖表的配置項和數據
        let option = {
            title: {
                text: titlet,   //左上角出現的名稱
            },
            tooltip: {
                trigger: 'axis'  //掠過會出現線
                axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
                    type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
                }
            },
            legend: {
                data: [name]   //提示每條線的作用（共有幾條線就寫幾個）
            },
            grid: {        // 直角坐標系底板  控制圖表顯示位置
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // axisLabel:{   //控制中間相隔幾個值顯示一個
                //     interval:1
                // },
                data: time,
            },
            yAxis: {
                type: 'value',
                // name:name,
                axisLabel: {
                    formatter: '{value} '
                }
            },
            series: [
                {
                    name: name,   //提示每條線代表的誰，和上面是有聯系的
                    type: 'line',
                    data: data,
                    markPoint: {  //顯示最大值最小值
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    // 平均值
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                        name: name,   //提示每條線代表的誰，和上面是有聯系的
                        type: "bar",
                        barWidth:"40%",
                        barMaxWidth:"60%",
                        //  barGap:'-50%',//柱圖間距
                        emphasis: {  //點擊上面提示小方塊會只顯示那一條柱狀圖
                          focus: 'series'
                        },
                        data: data  //數據
                    },
            ]
        };
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
        },