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;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、最后在初始化页面的时候,调用一下这个方法即可,就可以看到图表了