vue 中使用 vue-echarts 插件

安裝依賴

npm install vue-echarts --save

引入依賴

main.js

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

Vue.component('chart', ECharts)

在組件中使用echarts

首先得在Script中引入需要的圖表類型和參數組件

<script>
    // 折線
    import 'echarts/lib/chart/line'
    // 餅狀圖
    import 'echarts/lib/chart/pie'
    // 柱狀圖
    import 'echarts/lib/chart/bar'
    // ...

    // 提示
    import 'echarts/lib/component/tooltip'
    // 圖例
    import 'echarts/lib/component/legend'
    // 標題
    import 'echarts/lib/component/title'
    // ...
    export default {
        // ...
    }
</script>

然後就可以在<template>中使用

<template>
    <div>
        <chart  :options="options" :auto-resize="true"></chart>
    </div>
</template>

定義動態的options參數 引號中參數可以換其他的名稱

data () {
    return {
        options: {}
    }
}

在頁面掛載時賦值獲取的options // 注意這裏可以是從後臺獲取的，現在我們用數據模擬

mounted () {
    this.option = {
        // 標題
         title: {
          text: '某某圖'
          x: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 'normal'
          }
        },
        // 工具提示
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 圖例說明
        legend: {
          show: true,
          x: 'center',
          bottom: 20,
          data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎'],
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        // 各個部分的顏色
        color: ['#18DBDF', '#F6EF7B', '#3DE16F', '#EF69FB', '#FE5679'],
        // 拖拽的時候重新渲染  默認關閉
        calculable: true,
        // 工具箱
        toolbox: {    
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        label: {
          show: true,
          fontSize: 20
        },
        series : [
            {
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter: '{b} : {c} ({d}%)'
                    },
                    labelLine: {
                      show: true
                    }
                  }
                },
                name:'訪問來源',
                // 類型：這裏是餅圖
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                // 數據
                data:[
                    {value:335, name:'直接訪問'},
                    {value:310, name:'郵件營銷'},
                    {value:234, name:'聯盟廣告'},
                    {value:135, name:'視頻廣告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    }
}