ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

巧用echarts中的rich属性自定义样式

2021-12-21 14:33:31  阅读:233  来源: 互联网

标签:20 name 自定义 fontSize rich params echarts


rich使用
在echarts中rich主要是用于设置用户自定样式,我们可以在title,legend中使用rich
在做项目的时候需要自定义echarts图中字体样式

但是这个地方数字和文字的颜色是一样的,但是UI设计的图需要文字是黑色字体,数字是根据环形图的颜色一样
这里就需要用到rich属性来自定义字体的颜色,如:

series: [{
                            type: 'pie',
                            radius: ['40%', '60%'],
                            center: ['35%', '50%'],
                            data: echartData,
                            labelLine: {
                                normal: {
                                    length: 20,
                                    length2: 20
                                },

                            },
                            label: {
                                normal: {
                                    formatter: (params)=> {
                                        let str =(`{value|${params.value}}`)+ '\n'+(`{name|${params.name}}`);
                                        return str
                                    },
                                    borderWidth: 5,
                                    borderRadius: 5,
                                    // padding: [0, 86],
                                    height: 70,
                                    fontSize: 20,
                                    show: true,
                                    rich: {
                                        value:{
                                            fontSize:28,
                                        },
                                        name:{
                                            color:'#666666',
                                            fontSize:20,
                                        },
                                    }
                                }
                            },
                        }]

标签:20,name,自定义,fontSize,rich,params,echarts
来源: https://www.cnblogs.com/ylh188/p/15715149.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有