在Vue項目中使用Echarts的一種方式

主要使用了vue-echarts

1.依賴：

npm i echarts -S
npm i jquery -S
npm i vue-echarts -S

2.使用

• 在main.js中：

import ECharts from 'vue-echarts/components/ECharts.vue';

Vue.component('chart', ECharts);

• pie.vue 直接使用便可

<style scoped>
.content {
    /*自行添加樣式便可*/
}

#main {
    /*須要制定具體高度，以px爲單位*/
    height: 400px;
}
</style>
<template>
    <div class="content">
        <div id="main"></div>
    </div>
</template>
<script>
// 導入echarts
import echarts from 'echarts'
// 方便AJAX，按我的喜愛添加，而後對應修改下方獲取數據的代碼
import $ from 'jquery'
// 主要是使用AJAX，也可自行實現

// 皮膚引入 import theme-name from theme-folder

// 以餅圖爲例
// 其餘種類圖表配置項參見百度echarts官網

export default {
    data() {
            return {
                // 初始化空對象
                chart: null,
                // 初始化圖表配置
                opinion: ['高富帥', '矮富帥', '高富挫', '矮富挫', '女生'],
                opinionData: [{
                    value: 26,
                    name: '高富帥'
                }, {
                    value: 31,
                    name: '矮富帥'
                }, {
                    value: 18,
                    name: '高富挫'
                }, {
                    value: 28,
                    name: '矮富挫'
                }, {
                    value: 21,
                    name: '女生'
                }]
            }
        },
        methods: {
            // 繪圖
            drawGraph(id) {
                // 繪圖方法
                this.chart = echarts.init(document.getElementById(id))
                    // 皮膚添加同通常使用方式
                this.chart.showLoading()
                    // 返回到data中
                var that = this
                    // ajax 請求數據
                $.ajax({
                        // 方式
                        type: "GET",
                        // 是否異步
                        async: true,
                        // 路徑||API
                        url: "xxx",
                        //返回數據形式爲json
                        dataType: "json",
                        // 加載成功
                        success: function(result) {
                            // 更新初始數據
                            that.opinionData = result
                        },
                        // 加載錯誤
                        error: function(errorMsg) {
                            // alert("請求數據失敗!");
                            console.log(errorMsg)
                        }
                    })
                    // set
                this.chart.setOption({
                    title: {
                        text: '女生喜歡的男生種類',
                        subtext: '純屬扯犢子',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x: 'center',
                        y: 'bottom',
                        data: this.opinion // 別忘了this
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['pie']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    calculable: true,
                    series: [{
                        name: '種類',
                        type: 'pie',
                        // 內圓半徑，外圓半徑
                        radius: [30, 100],
                        // 位置，左右，上下
                        center: ['50%', '50%'],
                        roseType: 'area',
                        data: this.opinionData, // 別忘了this

                    }]
                })
                this.chart.hideLoading()
            }
        },
        // keypoint：執行方法
        // 「將回調延遲到下次 DOM 更新循環以後執行。在修改數據以後當即使用它，而後等待 DOM 更新。」
        mounted() {
            this.$nextTick(function() {
                this.drawGraph('main')
            })
        }
}
</script>