Echart 饼图label formatter 颜色样式

最新推荐文章于 2024-05-18 11:06:13 发布

Roottt_

最新推荐文章于 2024-05-18 11:06:13 发布

阅读量1.1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43896125/article/details/131704381

版权

效果图
在这里插入图片描述

options:{
 	title: {
    text: '0',
       textStyle: {
            fontSize: 24
        },
        subtext: '设备总数',
        subtextStyle: {
            fontSize: 14
        },
        left: 'center',
        top: '34%'
    },
    legend: {
        bottom: '1%',
        left: 'center',
        icon: 'circle',
    },
    color: ["#979797", "#00A870", "#FA5151"], //颜色
	tooltip: {
    	trigger: 'item'
    },
    label: {
        formatter: (params) => {
        	//console.log(params) //可打印 自定义显示数据
        	// 可通过params.data 获取到series data的数据。不止有name和value eg:params.data.color
        	//return params.name+`\n{${params.data.color}|`+params.percent+'%}'
            return params.name+'\n{per|'+params.percent+'%}';
        },
        rich: {
            per: {
                color: 'inherit', //继承了父颜色
                padding: [5, 0, 0, 0]
            },
            //自定义颜色
            grey:{color:"#979797"},
        },
    },
    series: {
        name: '',
        type: 'pie',
        radius:['48%', '68%'],
        animationDuration: 3000,
        center:['center', '45%'],
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 3,
        },
        data:[
        	 { value: 0, name: '设备离线', color: 'grey' },
             { value: 0, name: '正常运行', color: 'green' },
             { value: 0, name: '设备故障', color: 'red' },
		], 
    }}