Incubator-echarts: title中rich到底该怎么使用呢?

Created on 23 May 2018  ·  4Comments  ·  Source: apache/incubator-echarts

One-line summary [问题简述]

rich是一个强大的功能,在图表中label下rich能够很好的使用,但是在官方的文档里,我看到了标题也可以使用rich来进行富文本定义,但是不幸的是无论是例子还是文档,用的都是label里的rich进行的展示,我试着在title.textStyle里用label的例子写了一个rich但是并没有任何效果。

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:Echarts 4.0
  • Browser version [浏览器类型和版本]:Chrome 63.0.3239.132(正式版本)
  • OS Version [操作系统类型和版本]:win10

Expected behaviour [期望结果]

期望贵方能给一个在标题或者副标题中rich实例,或者更新官网文档的介绍,我想这个问题也对很多开发者造成了困扰,在百度上搜索这个问题发现很多人问,但并没有实际的解决方法,如果不支持请告知。

ECharts option [ECharts配置项]


option = {
    title: {
        text: '天气情况统计',
        subtext: '虚构数据',
        left: 'center',
        textStyle:{
            color:'red',
            fontSize:'24',
            rich:{
                //这是我直接用官方的例子拿过来的  ,这个rich到底该怎么用呢? 在标题中
            }
        }
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['西凉', '益州','兖州','荆州','幽州']
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
                {
                    value:1548,
                    name: '幽州',
                    label: {
                        normal: {
                            formatter: [
                                '{title|{b}}{abg|}',
                                '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                                '{hr|}',
                                '  {Sunny|}{value|202}{rate|55.3%}',
                                '  {Cloudy|}{value|142}{rate|38.9%}',
                                '  {Showers|}{value|21}{rate|5.8%}'
                            ].join('\n'),
                            backgroundColor: '#eee',
                            borderColor: '#777',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                title: {
                                    color: '#eee',
                                    align: 'center'
                                },
                                abg: {
                                    backgroundColor: '#333',
                                    width: '100%',
                                    align: 'right',
                                    height: 25,
                                    borderRadius: [4, 4, 0, 0]
                                },
                                Sunny: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Sunny
                                    }
                                },
                                Cloudy: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Cloudy
                                    }
                                },
                                Showers: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Showers
                                    }
                                },
                                weatherHead: {
                                    color: '#333',
                                    height: 24,
                                    align: 'left'
                                },
                                hr: {
                                    borderColor: '#777',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                value: {
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'left'
                                },
                                valueHead: {
                                    color: '#333',
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'center'
                                },
                                rate: {
                                    width: 40,
                                    align: 'right',
                                    padding: [0, 10, 0, 0]
                                },
                                rateHead: {
                                    color: '#333',
                                    width: 40,
                                    align: 'center',
                                    padding: [0, 10, 0, 0]
                                }
                            }
                        }
                    }
                },
                {value:535, name: '荆州'},
                {value:510, name: '兖州'},
                {value:634, name: '益州'},
                {value:735, name: '西凉'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

Other comments [其他信息]


Most helpful comment

找到了

title: {
    text: "{aaa| 走路数据分析}",
    textStyle: {
        rich: {
            aaa: {
                "backgroundColor":{"image":"xxx/yyy.png"},
                "height":40
            bbb: {
                "backgroundColor":{"image":"xxx/yyy.png"},
                "height":40
            }
        }
    }
},

All 4 comments

Same question.

相同的问题,希望提供一个示例

找到了

title: {
    text: "{aaa| 走路数据分析}",
    textStyle: {
        rich: {
            aaa: {
                "backgroundColor":{"image":"xxx/yyy.png"},
                "height":40
            bbb: {
                "backgroundColor":{"image":"xxx/yyy.png"},
                "height":40
            }
        }
    }
},

title rich 现在是有用的

 title: {
        text: "{aaa| 走路数据分析}",
        textStyle: {
            rich: {
                aaa: {
                    height:40,
                    color: 'red',
                    fontWeight: 600,
                    fontSize: 20,
                    backgroundColor: '#ccc',
                    align: 'center',

                    } 
                }
            }
        },
Was this page helpful?
0 / 5 - 0 ratings