echarts中将title设置成图片

echart饼图没有数据时候,把标题暂无数据替换成图片

 this.myCharts.setOption({
                title: {
                    show: !this.flag,   // 没数据才显示
                    extStyle: {
                        color: "gainsboro",
                        fontSize: 20
                    },
                    text: "{A|}",
                    left: "center",
                    top: "center",
                    textStyle: {
                        rich: {
                            A: {
                                //添加背景图片并且设置宽高,会自适应显示
                                width:140,
                                height:140,
                                backgroundColor: {
                                    image: require("../../assets/common/ic-empty-data.png")
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    icon: "rect",
                    itemWidth: 10,
                    itemHeight: 10,
                    right: '1%',
                    top: '-1%',
                    itemGap: 12,  
                     textStyle: {
                        color: '#666666',
                    },
                    data: this.legenData
                },
                color : [ '#397ae5', '#fc7070', '#75c17b', '#d222e2' ],
                series: [
                    {
                        name: '分布图',
                        type: 'pie',
                        radius: ['35%', '65%'],
                        center: ['50%', '58%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                formatter: a => {
                                    return (a.data['value'] + '(' + a.data['prtio'] + ')')
                                },
                                show: true,
                                position: 'left',
                                color: '#999999'
                            },
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                lineStyle: {
                                    color: '#999999'
                                },
                            }
                        },
                        data: this.chartData
                    }
                ],
            })

  

posted @ 2022-07-02 17:59  紫诺花开  阅读(942)  评论(0编辑  收藏  举报