Vue 中使用 ECharts 饼状图

版权声明：本文为博主原创文章，转载请注明作者和出处，如有错误，望不吝赐教。 https://blog.csdn.net/weixin_41888813/article/details/88041075

一，如下命令通过 npm 安装 ECharts

npm install echarts --save

二，引入 ECharts

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。

如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

var echarts = require('echarts');

 二，引用ECharts饼状图

<template>
    <div class="pie">
        <div id="pie1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
        </div>
        <div id="pie2">
            <div id="main2" style="float:left;width:100%;height: 300px"></div>
        </div>
    </div>
</template>

<script>
    var echarts = require('echarts');

    export default {
        data() {
            return {
                // 数据
                data1: [],
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            //初始化数据
            initData() {
                this.requested = true;
                this.http.get('/admin/pathologyInfo/pathologicalNum').then(resp => {
                    // 动态数据
                    this.data1 = resp.data;
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main1'));
                    // 绘制图表
                    myChart.setOption({
                        title : {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            bottom: 'bottom',
                            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                        },
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:[
                                    {value:335, name:'直接访问'},
                                    {value:310, name:'邮件营销'},
                                    {value:234, name:'联盟广告'},
                                    {value:135, name:'视频广告'},
                                    {value:1548, name:'搜索引擎'}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                }).finally(() => {
                    this.requested = false;
                });
            },
        }
    }
</script>