zoukankan      html  css  js  c++  java
  • 巧用echarts中的rich属性自定义样式

    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,
                                            },
                                        }
                                    }
                                },
                            }]
    

    本文来自博客园,作者:小基狠努力啊,转载请注明原文链接:https://www.cnblogs.com/ylh188/p/15715149.html

  • 相关阅读:
    窗口实训1
    课后练习----实现窗口的切换
    第五次实训作业继承
    课程总结
    999
    777777777777777777777
    7
    6
    5
    事件处理程序
  • 原文地址:https://www.cnblogs.com/ylh188/p/15715149.html
Copyright © 2011-2022 走看看