Echart饼状图中心加固定文字及计算结果

灰太狼 2022-10-02 04:47 21阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

例：
    //中心文字数据
    var data;
    @if(($manual_visit+$finish_visit)!=0) data ='回访率\n'+ '{
       { number_format(($manual_visit+$finish_visit)/($manual_visit+$finish_visit+$not_connect+$not_visit)*100,2) }}'+ '%';
    @else data ='回访率\n0%';
    @endif

var manual_visit = "{
       { $manual_visit }}";
    var finish_visit = "{
       { $finish_visit }}";
    var not_connect = "{
       { $not_connect }}";
    var not_visit = "{
       { $not_visit }}";
    var myCharts1 = echarts.init(document.getElementById('cake'));
    var option1 = {
        backgroundColor: 'white',
        tooltip: {
            trigger: 'item',
            formatter: "{b} :{c}个 ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: '75%',
            y: '30%',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 30,
            data: [
                {
                    name: "手动回访",
                    icon: "circle",
                    textStyle: {
                        fontSize: '14'
                    }
                },
                {
                    name: "已回访",
                    icon: "circle",
                    textStyle: {
                        fontSize: '14'
                    }
                },
                {
                    name: "未接通",
                    icon: "circle",
                    textStyle: {
                        fontSize: '14'
                    }
                },
                {
                    name: "未回访",
                    icon: "circle",
                    textStyle: {
                        fontSize: '14'
                    }
                }
            ]
        },
        series: [
            {
                name: '回访数据',
                type: 'pie',
                avoidLabelOverlap: false,
                radius: ['42%', '70%'],
                center: ['40%', '50%'],
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        formatter(){
                           return data;
                        },
                        color:"#4ecb73",
                        fontSize:22
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: manual_visit,
                        name: '手动回访',
                        itemStyle: {
                            normal: {
                                color: '#4bdbac'
                            }
                        }
                    },
                    {
                        value: finish_visit,
                        name: '已回访',
                        itemStyle: {
                            normal: {
                                color: '#4ecb73'
                            }
                        }
                    },
                    {
                        value: not_connect,
                        name: '未接通',
                        itemStyle: {
                            normal: {
                                color: '#ff7c7c'
                            }
                        }
                    },
                    {
                        value: not_visit,
                        name: '未回访',
                        itemStyle: {
                            normal: {
                                color: '#f2637b'
                            }
                        }
                    }
    
                ],
            }
        ]
    };
    myCharts1.setOption(option1);

转载于:https://my.oschina.net/guozhouyuan/blog/3046164

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/4f2a1daeadcf4a7f8602f5d30fc306b9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts的饼状图变成环形图

首先实现一个饼状图 <!DOCTYPE html> <html> <head> <met

末蓝、/ 2022年12月23日 00:49/ 0 赞/ 264 阅读

相关修改echarts饼状图位置

目录一：修改方法二：效果三：参考一：修改方法 1. `属性` series-pie.center 2. 官方文档

Dear 丶/ 2022年12月19日 11:38/ 0 赞/ 468 阅读

相关 echart 环形饼图设置中心固定信息

UI图 ![2020102815183236.png][] 中间的1/3是固定值不会因为交互而改变使用title 属性来显示中间的信息如将title 的to

矫情吗；*/ 2022年11月20日 09:53/ 0 赞/ 212 阅读

相关 echarts饼状图实战实例

基于echarts的饼状图 echarts本人也是用的很少的了，有缘碰到公司在用，于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。来看看效果图吧！ !

谁借莪１个温暖的怀抱￠/ 2022年11月18日 13:47/ 0 赞/ 291 阅读

相关 echarts饼状图指定颜色

为每个饼图的扇面指定不同的颜色指定PIE饼图扇形每个扇面的颜指定PIE饼图扇形每个扇面的颜 > 指定PIE饼图扇形每个扇面的颜色，修改每个data

- 日理万妓/ 2022年11月07日 05:47/ 0 赞/ 352 阅读

相关 Echart饼状图中心加固定文字及计算结果

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 例： //中心文字数据 var

灰太狼/ 2022年10月02日 04:47/ 0 赞/ 22 阅读

相关 ECharts图表------饼状图

效果图: ![SouthEast][] <!DOCTYPE html> <html> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月01日 01:14/ 0 赞/ 374 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 410 阅读

相关 ECharts之饼状图

效果图 ![在这里插入图片描述][20190725130341211.gif] 背景图片 ![20190725170845879.png][] 下载EChar

╰+哭是因爲堅強的太久メ/ 2021年09月30日 05:32/ 0 赞/ 999 阅读

相关 echart生成饼状图

//绘制图表. echarts.init(document.getElementById('main')).setOption(\{ tooltip : \{ tr

女爷i/ 2021年09月29日 09:08/ 0 赞/ 529 阅读