您现在的位置是:首页 > 正文

echart--pie图

2024-01-30 20:55:49阅读 0

pie图初始化

1.环形图中间添加描述

使用zrender渲染方式

早期方式:

var _ZR = myChart.getZrender();
var TextShape = require('zrender/shape/Text');
_ZR.addShape(new TextShape({
    hoverable : false,
    style : {
        x : _ZR.getWidth() * 0.5,
        y : _ZR.getHeight() / 2,
        color: "red",
        textFont: 'normal 14px Microsoft YaHei',
        text : "总数\n"+total,
        textAlign : 'center'
    }
}));
_ZR.refresh();

现在的方式:

var _ZR = myChart.getZr();
_ZR.add(new echarts.graphic.Text({
    hoverable: false,
    style: {
        x: _ZR.getWidth() * 0.5,
        y: _ZR.getHeight() / 2-10,
        textFill: "red",//设置文字颜色
        textFont: 'normal 16px Microsoft YaHei',
        text:17,
        textAlign: 'center'
    }
}));

数据更新问题:

var _ZR = myChart.getZr();
var text=new echarts.graphic.Text({
    hoverable: false,
    style: {
        x: _ZR.getWidth() * 0.5,
        y: _ZR.getHeight() / 2-10,
        textFill: "red",//设置文字颜色
        textFont: 'normal 16px Microsoft YaHei',
        text:17,
        textAlign: 'center'
    }
})
_ZR.add(text);

text.attr('style', {
    text: total
})

使用title属性

option 中添加属性:

        text: '{a|1000}',
        subtext: '{b|总数}',
        x: '30',
        y: '36%',
        itemGap: 0,
        padding: 0,
        textStyle: {
            rich: {
                a: {//富文本设置文字居中
                    fontWeight: 'normal',
                    lineHeight: 28,
                    height: 28,
                    color: '#666666',
                    width: 140,
                    fontSize: 28,
                    align: 'center'
                }
            }
        },
        subtextStyle: {
            rich: {
                b: {
                    color: '#666666',
                    fontSize: 12,
                    lineHeight: 12,
                    height: 12,
                    align: 'center',
                    width: 140
                }
            }
        }

数据更新问题:

opt.title.text = '{a|' + total + '}';
echart.setOption(opt)

2.图例左右问题:当图例位置在右下角时默认文字描述变成左侧
展示的图例文字描述在左边:
这里写图片描述
希望文字在图例右侧:
这里写图片描述
解决方法:

legend: {
    orient: 'vertical',
    y: 'center',
    x: 'right',
    align:'left',
}

3.初始化图表


    var myChart = echarts.init(document.getElementById('divId'));
    myChart.hideLoading();
    var pieInfoOption = {
        /*title:{
            text:"17",
            subtext: '总数',
            left:"26%",
            top:"40%",
        },*/
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            //align:'left',
            data: [{
                name: '直接访问',
                icon: 'circle',
                textStyle: {

                }
            }, {
                name: '邮件营销',
                icon: 'circle'
            }, {
                name: '联盟广告',
                icon: 'circle'
            }, {
                name: '视频广告',
                icon: 'circle'
            }, {
                name: '搜索引擎',
                icon: 'circle'
            }],
            formatter: function(params) {
                return params;
            }
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 310,
                    name: '邮件营销'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 135,
                    name: '视频广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ]
        }]
    };

    myChart.setOption(pieInfoOption);
    var _ZR = myChart.getZr();
    log(_ZR)
    // var TextShape = require('zrender/shape/Text');
    _ZR.add(new echarts.graphic.Text({
        hoverable: false,
        style: {
            x: _ZR.getWidth() * 0.5,
            y: _ZR.getHeight() / 2-10,
            color: "#000000",
            textFont: 'normal 16px Microsoft YaHei',
            text:17,
            textAlign: 'center'
        }
    }));
        _ZR.add(new echarts.graphic.Text({
        hoverable: false,
        style: {
            x: _ZR.getWidth() * 0.5,
            y: _ZR.getHeight() / 2,
            color: "#ff0000",
            textFont: 'normal 14px Microsoft YaHei',
            text:"\n"+ "总数",
            textAlign: 'center'
        }
    }));
    _ZR.refresh();

网站文章

  • Linux/Ubuntu服务器数据盘挂载及扩容

    服务器部署: 运行 fdisk -l 命令查看实例上的数据盘: fdisk -l 查看磁盘使用情况: df -lh 可参考:https://help.aliyun.com/document_detail/108501.html ①分区: 依次执行以下命令以创建一个单分区数据盘: 1. 运行 fdisk -u /dev/vdb:分区数据盘。 ...

    2024-01-30 20:55:43
  • 产品经理的入门之道

    应为

    2024-01-30 20:55:36
  • 设置SGA的原则以及修改它的大小 热门推荐

    SGA

    2024-01-30 20:55:28
  • C++怎样比较char型的字符串与其他字符串

    字符串比较用bai strcmp(str1, str2) == 0 判断相等的,==du是比较指针所指的地址zhi是否相等。例如:char str[] = "Hello World";char* p1...

    2024-01-30 20:54:59
  • Linux浅学

    Linux浅入学习

    2024-01-30 20:54:53
  • c语言二级考试重点,c语言二级考试重点和知识点..doc

    c语言二级考试重点和知识点.各章节重点、难点、考点总结一、考点分析1??C语言概述知识点分值考核几率专家点评C语言概述0-1 ?20%简单识记C程序的构成0-1 ?30%简单识记标识符1-2??60%...

    2024-01-30 20:54:46
  • Casbin之自定函数

    Casbin之自定函数

    Casbin之自定函数

    2024-01-30 20:54:17
  • epoll总结

    Epoll epoll操作由三个函数构成:头文件为 #include #include int epoll_create(int size); int epoll_ctl(int epfd, int op, int fd, struct epoll_event *event); int epoll_wait(in...

    2024-01-30 20:54:10
  • 在Linux和Windows上安装sentinel-1.8.5

    在Linux和Windows上安装sentinel-1.8.5

    记录:380 场景:在CentOS 7.9操作系统上,安装sentinel-1.8.5。在Windows上操作系统上,安装sentinel-1.8.5。Sentinel是面向分布式、多语言异构化服务架构的流量治理组件。

    2024-01-30 20:54:03
  • 使用 sqoop从MySQL增量导出数据到hive

    使用 sqoop从MySQL增量导出数据到hive

    本文主要解释incremental参数下append模式和lastmodified模式的区别,想要了解具体其他参数请参考官方文档: http://sqoop.apache.org/docs/1.4.6...

    2024-01-30 20:53:33