Vue项目中如何使用可视化图表echarts

app.title = &＃39;环形图&＃39;;
option = {
    tooltip: {
        trigger: &＃39;item&＃39;,
        formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
        orient: &＃39;vertical&＃39;,
        x: &＃39;left&＃39;,
        data:[&＃39;直接访问&＃39;,&＃39;邮件营销&＃39;,&＃39;联盟广告&＃39;,&＃39;视频广告&＃39;,&＃39;搜索引擎&＃39;]
    },
    series: [
        {
            name:&＃39;访问来源&＃39;,
            type:&＃39;pie&＃39;,
            radius: [&＃39;50%&＃39;, &＃39;70%&＃39;],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: &＃39;center&＃39;
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: &＃39;30&＃39;,
                        fontWeight: &＃39;bold&＃39;
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:&＃39;直接访问&＃39;},
                {value:310, name:&＃39;邮件营销&＃39;},
                {value:234, name:&＃39;联盟广告&＃39;},
                {value:135, name:&＃39;视频广告&＃39;},
                {value:1548, name:&＃39;搜索引擎&＃39;}
            ]
        }
    ]
};

那么来只需要几步就可以使用了：

1、本地安装：

可以使用 npm 安装 ECharts：

npm install echarts

2、在index.html中引入 echarts

import echarts from &＃39;echarts&＃39;

3、写一个div容器用来承载图表：

上面代码中设置一个div(设置好高度、大小等属性,设置一个id)

4、写一个方法用来初始化图表代码（直接复制粘贴官网文档的代码m修改一下容器id和各部分的数值即可）：

getTeamLeader(){
            var myChart = echarts.init(document.getElementById(&＃39;teamLeader&＃39;));
            myChart.setOption({
              title : {
                text: &＃39;团队考核情况&＃39;,
                x:&＃39;center&＃39;
            },
            tooltip: {
                trigger: &＃39;item&＃39;,
                formatter: "{a} 
{b}: {c} ({d}%)"
            },
            legend: {
                orient: &＃39;vertical&＃39;,
                x: &＃39;left&＃39;,
                data:[&＃39;已完成&＃39;,&＃39;未完成&＃39;]
            },
            series: [
                {
                    name:&＃39;访问来源&＃39;,
                    type:&＃39;pie&＃39;,
                    radius: [&＃39;50%&＃39;, &＃39;70%&＃39;],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: &＃39;center&＃39;
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: &＃39;30&＃39;,
                                fontWeight: &＃39;bold&＃39;
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:50, name:&＃39;已完成&＃39;},
                        {value:50, name:&＃39;未完成&＃39;}
                    ]
                }
            ]
          });
        }

5、最后在初始化页面的时候,调用一下这个方法即可,就可以看到图表了：

本文转自：https://www.jianshu.com/p/2894b781063b

以上就是Vue项目中如何使用可视化图表echarts的详细内容，更多请关注 第一PHP社区 其它相关文章！