最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】用ECharts画饼图且希望选项和百分比等值都显示在饼图上

ECharts crifan 282浏览 0评论
折腾:
【已解决】把矿泉水成本占比表格转换成饼图
期间,希望把表格中矿泉水的百分比,弄成饼图
虽然之前已基本用Markdown在线画出了饼图
但是百分比的值 每一项 等值 希望出现在饼图上
Examples – Apache ECharts (incubating)
ECharts Gallery – 交通方式
echarts 饼图 name value
ECharts 饼图 | 菜鸟教程
解决echarts饼图显示百分比,和显示内容字体及大小,如何给eCharts饼图区域指定颜色_九亿宅男的梦的博客-CSDN博客
option = {
    title: {
        text: '矿泉水成本占比图 总价1.5元',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '矿泉水成本占比',
            type: 'pie',
            radius: '60%',
            center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inside', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{b} {c}元 {d}%'
                }
            },
            data: [
                {value: 0.67, name: '水本身'},
                {value: 11.3, name: '瓶子、盖、喷码、胶带'},
                {value: 14.7, name: '广告运营费'},
                {value: 13.3, name: '厂家(利润)'},
                {value: 26.7, name: '经销商(利润)'},
                {value: 33.3, name: '超市(利润)'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
效果:
由于其中1个空间太小,不方便看清,所以去换成:
                    position:’outside', //标签的位置
即:
option = {
    title: {
        text: '矿泉水成本占比图 总价1.5元',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '矿泉水成本占比',
            type: 'pie',
            radius: '60%',
            center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'outside', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{b} {c}元 {d}%'
                }
            },
            data: [
                {value: 0.67, name: '水本身'},
                {value: 11.3, name: '瓶子、盖、喷码、胶带'},
                {value: 14.7, name: '广告运营费'},
                {value: 13.3, name: '厂家(利润)'},
                {value: 26.7, name: '经销商(利润)'},
                {value: 33.3, name: '超市(利润)'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
基本满足
再去研究看看
换个更好看的配色
以及优化配置
期间的代码:
option = {
    title: {
        text: '矿泉水成本占比图',
        subtext: '总价1.5元',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: ['水(本身)', '瓶子、盖、喷码、胶带', '广告运营费', '厂家(利润)', '经销商(利润)', '超市(利润)']
    },
    series: [
        {
            name: '矿泉水成本占比',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'outside', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{b} {c}元 {d}%'
                }
            },
            data: [
                {value: 0.01, name: '水(本身)'},
                {value: 0.17, name: '瓶子、盖、喷码、胶带'},
                {value: 0.22, name: '广告运营费'},
                {value: 0.20, name: '厂家(利润)'},
                {value: 0.40, name: '经销商(利润)'},
                {value: 0.50, name: '超市(利润)'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
再去优化 subtext和text
Echarts sub text style
ECharts.Style – elm-echarts 10.0.1
text : Maybe String
, link : Maybe String
, target : Maybe String
, textStyle : Maybe TextStyleOption
, textAlign : Maybe HorizontalAlignment
主标题和副标题单独设置样式无法生效 · Issue #9980 · apache/incubator-echarts
    title : {
        text: '单个工单平均反馈次数',
        // x:'center',
        // textStyle:{
        //     align: 'center'
        // },
        textAlign: 'center',
        subtext: '{a|传输专业}',
        subtextStyle:{
            color:'black',
            fontWeight: 'bolder',
            fontSize:'18',
            align: 'left',
            verticalAlign :'top',
             rich: {
                a: {
                    color:'green',
                    fontWeight: 'bolder',
                    fontSize: 18,
                    backgroundColor: 'blue'
                }
            }
        }
【总结】
最后代码是:
option = {
    title: {
        text: '矿泉水成本占比图',
        textStyle: {
            color: "#0649BD",
            fontSize: 28,
        },
        subtext: '单瓶 550mL 零售价=1.5元',
        subtextStyle : {
            fontSize: 18,
            color: "purple",
        },
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: ['水(本身)', '瓶子、盖、喷码、胶带', '广告运营费', '厂家(利润)', '经销商(利润)', '超市(利润)']
    },
    series: [
        {
            name: '矿泉水成本占比',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'outside', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{b}:{c}元 {d}%'
                }
            },
            data: [
                {value: 0.01, name: '水(本身)'},
                {value: 0.17, name: '瓶子、盖、喷码、胶带'},
                {value: 0.22, name: '广告运营费'},
                {value: 0.20, name: '厂家(利润)'},
                {value: 0.40, name: '经销商(利润)'},
                {value: 0.50, name: '超市(利润)'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
效果:
其中的饼图:

转载请注明:在路上 » 【已解决】用ECharts画饼图且希望选项和百分比等值都显示在饼图上

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.085 seconds, using 9.37MB memory