vue中echarts统计图表之饼图

最新推荐文章于 2024-09-06 17:39:42 发布

小李ing

最新推荐文章于 2024-09-06 17:39:42 发布

阅读量1.4k

点赞数 1

分类专栏：前端 iview css 文章标签： css3 es6 css html5 前端

本文链接：https://blog.csdn.net/qq_37496470/article/details/104904454

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

iview

6 篇文章 0 订阅

订阅专栏

常规柱形统计图

横向柱状统计图

以下是饼图代码：

设置饼图的属性：

getPie() {
    // 绘制图表
    var myChart = echarts.init(document.getElementById('pieChart'))
    this.option1 = {
        stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
            trigger: 'item',
            formatter: '{b}:{c} ({d}%)'
        },
        //图例
        legend: {//图例  标注各种颜色代表的模块
            orient: 'vertical',//图例的显示方式  默认横向显示
            // bottom: 5,//控制图例出现的距离  默认左上角
            left: 'left',//控制图例的位置
            // itemWidth: 25,//图例颜色块的宽度和高度
            // itemHeight: 12,
            textStyle: {//图例中文字的样式
                color: '#000',
                fontSize: 14
            },
            data: ['已逾期', '未还款', '已还款']//图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: ['#FF5850', '#2D93FF', '#71D801'],
        // 饼图数据
        series: {
            // name: 'bug分布',
            type: 'pie',             //echarts图的类型   pie代表饼图
            // radius: '75%',
            radius: ['43%', '70%'],//饼图中饼状部分的大小所占整个父元素的百分比
            center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
            // data:''               //饼图数据
            data: [                  //每个模块的名字和值
                {name: '已逾期', value: this.overdueCount},
                {name: '未还款', value: this.returnCount},
                {name: '已还款', value: this.returnedMoney}
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                        // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                    },
                    labelLine: {
                        show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                    }
                }
            },
        }

    }
    //使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.option1)
},

在钩子函数中调用：

this.getPie()

拿到数据后赋值：

this.option1.series.data[0].value = respond.data.data.overdueCount
this.option1.series.data[1].value = respond.data.data.returnCount
this.option1.series.data[2].value = respond.data.data.returnedMoney
var myChart = echarts.init(document.getElementById('pieChart'));
myChart.setOption(this.option1);

效果如下：