Vue中echarts的基本用法

前言：同大多數的前端框架一樣，先讀官網的使用方法。學會基本使用后，在實例中找到自己想要demo。拿過來改一改，一個echarts圖表就形成，畢竟人家做就是為了方便使用。

我是在vue中下面直接使用的echarts。下面按步驟講解。

第一步：安裝echarts依賴包，然后引入，注意最好在當前使用的組件中引入，而不需要在main.js中注冊。

//1.首先引入
import echarts from "echarts";

第二步：在頁面中創建一個盒子，用來裝載圖表

<!-- 2.為echarts准備一個具備大小的DOM -->
<div id="main" style="width:400px;height:350px;backgroundColor:'pink'"></div>

第三步：在js中初始化實例，這里我寫到vue組件的mounted鈎子函數中了

// 3.基於准備好的dom，初始化echarts實例
 var myChart = echarts.init(document.getElementById("main"));

第四步：也是最重要的一步，將所找到的demo的options放在本組件的data中。echarts的渲染主要是因為options指定的方式不同

//第四步
        option : {
            title: {
                text: '缺陷統計',
                // subtext: '純屬虛構',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            color:['green', 'orange','pink','#010101'],
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['無缺陷','一般缺陷', '嚴重缺陷', '危急缺陷']
            },
            series: [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 833, name: '無缺陷'},
                        {value: 335, name: '一般缺陷'},
                        {value: 80, name: '嚴重缺陷'},
                        {value: 9, name: '危急缺陷'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },

第五步：最后一步。還是在mounted函數中，將剛才的options設置到聲明的實例中。

//5.使用剛指定的配置項和數據顯示圖表。
myChart.setOption(this.option);

這樣，一個echarts的簡單圖表實例就形成了，下面是效果圖