{img|}{title| 湿度}echarts 配置项内容和展示

配置项如下
      var data = 200.4;

data += '';
data = data.split("");
var numberStr = '';
data.forEach(function(item) {
    if (item !== '.') {
        numberStr += '{' + item + '|} ';
    } else {
        numberStr += '{d|} ';
    }
});
numberStr += '{unit|}';

var num_fontSize = 80;
var d_fontSize = 10;
var num_lineHeight = 80;
var unit_fontSize = 60;
var unit_img = 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/db96cf98a5bd45d3739236bf87ef4546/RH_.png';
var title_img = 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/b15beb6930239aec4d765aab74974391/humidity.png';

option = {
    backgroundColor: "#24273e",
    title: [{
        text: '{img|}{title| 湿度}',
        textStyle: {
            rich: {
                img: {
                    fontSize: 20,
                    backgroundColor: {
                        image: title_img
                    }
                },
                title: {
                    fontSize: 18,
                    color: '#fff',
                }
            }
        }
    }, {
        text: numberStr,
        left: 'center',
        top: 'center',
        textStyle: {

            rich: {
                0: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/1c838159f66cc82a73439492e8f7202b/0.png'
                    }
                },
                1: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/205474ef86eddf291bfc32373cfd6967/1.png'
                    }
                },
                2: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/f705135c0b8a1f9fb605751ecff1b48d/2.png'
                    }
                },
                3: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/911b62022388b537a2d7ac441bb10444/3.png'
                    }
                },
                4: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/3481c324410071b393e9cd5f1d52b665/4.png'
                    }
                },
                5: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/2f367598bd8e8b15767b55882bd5ab7f/5.png'
                    }
                },
                6: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/34abe9437ba6046ea6bbfd678b2dc58f/6.png'
                    }
                },
                7: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/eb33bb965ad340f857e1e52ef8d39168/7.png'
                    }
                },
                8: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/dcf7b023d7172b0baf4d6d1fb697f2f0/8.png'
                    }
                },
                9: {
                    color: '#fff',
                    fontSize: num_fontSize,
                    lineHeight: num_lineHeight,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/0d1ab019ee3a8577f64b6824ca009e65/9.png'
                    }
                },
                d: {

                    color: '#fff',
                    fontSize: d_fontSize,
                    lineHeight: d_fontSize,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: 'https://gitlab.dasudian.net/customer/demo/flowcodes/uploads/f8a19f981d6c1b77988c40e78ecd2fe8/dot..png'
                    }
                },
                unit: {
                    fontSize: unit_fontSize,
                    lineHeight: 100,
                    verticalAlign: 'bottom',
                    backgroundColor: {
                        image: unit_img
                    }
                }

            }
        }
    }]
};
    
截图如下