Echart饼图-圆形图修改重新绘制

最新推荐文章于 2024-09-20 11:38:47 发布

suxuelian

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/suxuelian/article/details/115261460

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先看看默认效果：

代码如下：

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

修改后第一种显示对饼图中间数字进行汇总而非每次选择每个项后展示该项名称，对鼠标移入做详细展示拆分，效果如图：

代码如下：

option = {
     tooltip: {
        trigger: 'item',
        formatter: '{b} <br/>占比： {d}% <br/>金额：￥{c}'
      },
    legend: {
        top: '5%',
        left: 'center'
    },
    
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {

                    normal: {
                
                    show: true,
                
                    position: 'center',
                
                    color:'#4c4a4a',
                
                    formatter: '营收总额' + '\n\r' +'{total|' + 5656 +'}', rich: { total:{ fontSize: 35, fontFamily : "微软雅黑",
                    color:'#454c5c' },
                
                    active: { fontFamily : "微软雅黑", fontSize: 16, color:'#6c7a89', lineHeight:30} } },
                    emphasis: {
                    show: true }
                
                    },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

第二种改造，对原来的数据结构进行修改，增加显示多项。效果如图：

代码如下：

option = {
      tooltip: {
        trigger: 'item',
        // formatter: '{b0} <br/> {c} ({d}%)'
         formatter: function(params) {
                var res = params.name+'<br/>';
                var myseries = option.series;
                for (var i = 0; i < myseries.length; i++) {
                    for(var j=0;j<myseries[i].data.length;j++){
                        console.log(myseries[i])
                        if(myseries[i].data[j].name==params.name){
                            res+=' 总额： '+myseries[i].data[j].value+'</br>';
                            res+=' 占比： '+myseries[i].data[j].radio+'</br>';
                            res+=' 订单量： '+myseries[i].data[j].count+'</br>';
                        }
                    }
                }
                return res;
             
         }
      },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {

                    normal: {
                
                    show: true,
                
                    position: 'center',
                
                    color:'#4c4a4a',
                
                    formatter: '营收总额' + '\n\r' +'{total|' + 5656 +'}', rich: { total:{ fontSize: 35, fontFamily : "微软雅黑",
                    color:'#454c5c' },
                
                    active: { fontFamily : "微软雅黑", fontSize: 16, color:'#6c7a89', lineHeight:30} } },
                    emphasis: {
                    show: true }
                
                    },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
             data: [
                {value: 1048, name: '搜索引擎',count:200,radio:'20%'},
                {value: 735, name: '直接访问',count:210,radio:'25%'},
                {value: 580, name: '邮件营销',count:220,radio:'26%'},
                {value: 484, name: '联盟广告',count:230,radio:'27%'},
                {value: 300, name: '视频广告',count:240,radio:'29%'}
            ]
        }
    ]
};

以上代码是针对Echart饼图-圆形图修改，根据业务使用改造的，记录以便日后使用。