环形饼图ECharts实现Demo

版权声明：本文为微信公众号前端小二版权所有，如需转载可私信或关注文末微信公众号留言。 https://blog.csdn.net/qq_34832846/article/details/89153899

由于接下来的项目可能会大量用到图表显示与交互，所以抽空仔细看了下echarts文档。顺手根据可能有的项目需求写了个饼图demo。

需求点如下：

1. 饼图样式为甜甜圈环形饼图
2. 饼图各扇区以自定义颜色区分
3. 对饼图扇区hover时扇区呈放大动画效果、显示文本标签与标签导线并自定义两者样式
4. 饼图中心点常显相关自定义数据
5. 图例显示数据名与数据值

为完成以上功能点，需了解的配置注意点是：

• label属性配置文本标签，用于说明数据信息，可配置emphasis高亮状态
• labelLine属性配置标签视觉引导线
• formatter属性配置内容格式化，支持字符串模板和回调函数两种形式，采用回调函数形式时注意函数参数的区别
• graphic属性可将部分图形元素添加到echarts图表中，支持的图形元素包括image, text, circle等十余种，本例用来实现需求4

具体demo如下，部分代码作用看注释：

import echarts from "echarts";
import "../sass/common.scss";

var chartData = {
    value: 200,
    name: "总订货量",
    detail: {
        "已交收量": 50,
        "未交收量": 150
    }
}

var chartColor = [ "##70F2D2", "##FF483C", "#3994FD", "#FFC400", "#E5E5E5" ]

// 初始化echarts实例
let chartInst = echarts.init( document.getElementById( "echartMain" ) );

// 指定图表的配置项和数据
let options = {
    title: {
        text: 'doughnut chart'
    },
    // 提示框组件
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 图例组件
    legend: {
        orient: 'vertical',
        right: "4%",
        top: "45%",
        data: [ "已交收量", "未交收量" ],
        formatter: function ( name ) {
            var valNum = 0;
            for( var i in chartData.detail ){
                if( i === name ){
                    valNum = chartData.detail[i]
                }
            }
            return name + valNum + "手";
        }
    },
    // 原生图形元素组件
    graphic: [
        {
            type: 'group',
            left: '45%',
            top: 'center',
            width: 100,
            height: 100,
            children: [
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: '80%',
                    style: {
                        fill: '#377ade',
                        fontSize: 16,
                        text: [
                            chartData.value + "手"
                        ].join('\n'),
                        font: "16px Microsoft YaHei"
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: '100%',
                    style: {
                        fill: '#999',
                        fontSize: 16,
                        text: [
                            chartData.name
                        ].join('\n'),
                        font: "16px Microsoft YaHei"
                    }
                }
            ],
            onclick: function ( e ) {
                console.log( e );
            }
        }
    ],
    // 系列组件，控制图表类型，如饼图、折线图等
    series: [{
        name: '销量',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        legendHoverLink: true,  // 是否启用图例 hover 时的联动高亮。
        hoverAnimation: true,   // 是否开启 hover 在扇区上的放大动画效果。
        // hoverOffset: 10,
        // 文本标签
        label: {
            // 正常情况下
            normal: {
                show: false,
            },
            // hover高亮情况下
            emphasis: {
                show: true,
                formatter: function ( params ) {
                    var str = '{valSty|' + params.value + '手}\n{nameSty|' + params.name + '}'
                    return str;
                },
                rich: {
                    valSty: {
                        color: "#333",
                        fontSize: 20,
                        fontWeight: 700,
                        height: 30
                    },
                    nameSty: {
                        color: "#999",
                        fontSize: 20,
                    }
                }
            }
        },
        // 文本标签的视觉引导线
        labelLine: {
            length: 30,
            length2: 60
        },
        // 设置扇区图形样式
        itemStyle: {
            color: function ( params ) {
                var colorArr = [ "#3994FD", "#E5E5E5" ];
                return colorArr[ params.dataIndex ];
            }
        },
        // 设置高亮样式
        emphasis: {
            itemStyle: {
                // color: {
                //     type: 'linear',
                //     x: 0.4,
                //     y: 1,
                //     x2: 1,
                //     y2: 0.4,
                //     colorStops: [{
                //         offset: 0, color: '#3994FD' // 0% 处的颜色
                //     }, {
                //         offset: 1, color: '#A9CBF5' // 100% 处的颜色
                //     }],
                //     global: false // 缺省为 false
                // }
            }
        },
        data: [
            { value: 50, name: "已交收量" },
            { value: 150, name: "未交收量" }
        ]
    }]
}

// 使用刚指定的配置项和数据显示图表。
chartInst.setOption( options );
console.log( chartInst.getWidth() );
console.log( chartInst.getHeight() );
console.log( chartInst.getDom() );
console.log( chartInst.getOption() );
// chartInst.resize( {
//     width: 800,
//     height:600
// } )

图表显示截图如下：