Vue項目中使用可視化圖表echarts

app.title = '環形圖';

option = {

    tooltip: {

        trigger: 'item',

        formatter: "{a} <br/>{b}: {c} ({d}%)"

    },

    legend: {

        orient: 'vertical',

        x: 'left',

        data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']

    },

    series: [

        {

            name:'訪問來源',

            type:'pie',

            radius: ['50%', '70%'],

            avoidLabelOverlap: false,

            label: {

                normal: {

                    show: false,

                    position: 'center'

                },

                emphasis: {

                    show: true,

                    textStyle: {

                        fontSize: '30',

                        fontWeight: 'bold'

                    }

                }

            },

            labelLine: {

                normal: {

                    show: false

                }

            },

            data:[

                {value:335, name:'直接訪問'},

                {value:310, name:'郵件營銷'},

                {value:234, name:'聯盟廣告'},

                {value:135, name:'視頻廣告'},

                {value:1548, name:'搜索引擎'}

            ]

        }

    ]

};

1、本地安裝：

可以使用 npm 安裝 ECharts：

npm install echarts

2、在index.html中引入 echarts

import echarts from 'echarts'

3、寫一個div容器用來承載圖表：

<div class="hccalone">
       <div  id="teamLeader" style="float:left;width:100%;height: 300px"></div>
</div>

4、寫一個方法用來初始化圖表代碼

getTeamLeader(){

            var myChart = echarts.init(document.getElementById('teamLeader'));

            myChart.setOption({

              title : {

                text: '團隊考核情況',

                x:'center'

            },

            tooltip: {

                trigger: 'item',

                formatter: "{a} <br/>{b}: {c} ({d}%)"

            },

            legend: {

                orient: 'vertical',

                x: 'left',

                data:['已完成','未完成']

            },

            series: [

                {

                    name:'訪問來源',

                    type:'pie',

                    radius: ['50%', '70%'],

                    avoidLabelOverlap: false,

                    label: {

                        normal: {

                            show: false,

                            position: 'center'

                        },

                        emphasis: {

                            show: true,

                            textStyle: {

                                fontSize: '30',

                                fontWeight: 'bold'

                            }

                        }

                    },

                    labelLine: {

                        normal: {

                            show: false

                        }

                    },

                    data:[

                        {value:50, name:'已完成'},

                        {value:50, name:'未完成'}

                    ]

                }

            ]

          });

        }

5、最后在初始化頁面的時候,調用一下這個方法即可,就可以看到圖表了