Echarts image 使用

1. 通过image:'//...xx.png' 在扇形图中可能会失败，可以将需要载入的img转换成base64直接载入

2. 可以通过背景色来载入图片

backgroundColor: {
    image: 'xxx/xxx.jpg'
},

实例（扇形图）：

var option = {
            tooltip: {
                trigger: "item",
                show: true,
                formatter: "{a} <br/>{b}: {c} ({d}%)",
            },
            //手动添加文本及绘制列表
            graphic: [{
                type: 'text',
                left: '85',
                top: '115',
                style: {
                    text: 'Crash device', //使用“+”可以使每行文字居中
                    fontSize: "20px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            },{
                type: 'text',
                left: 310,
                top: '30',
                style: {
                    text: 'Version', //使用“+”可以使每行文字居中
                    fontSize: "16px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            },{
                type: 'text',
                left: 490,
                top: '30',
                style: {
                    text: 'Times', //使用“+”可以使每行文字居中
                    fontSize: "16px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30,
                }
            }, {
                type: 'text',
                left: 560,
                top: '30',
                style: {
                    text: 'Devices', //使用“+”可以使每行文字居中
                    fontSize: "16px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            }, {
                type: 'text',
                left: 632,
                top: '30',
                style: {
                    text: 'Crash%', //使用“+”可以使每行文字居中
                    fontSize: "16px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            }, {
                type: 'text',
                left: 715,
                top: '30',
                style: {
                    text: 'AVG. times', //使用“+”可以使每行文字居中
                    fontSize: "16px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            }, {
                type: 'text',
                left: 815,
                top: '30',
                style: {
                    text: 'AVG. devices', //使用“+”可以使每行文字居中
                    fontSize: "16px",
                    textAlign: 'center',
                    fill: '#000',
                    width: 30,
                    height: 30
                }
            }
            ],
            //展示数据
            legend: {
                icon: 'bar',
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 15,
                orient: 'vertical',
                align: 'left',
                top: 50,
                left: 300,
                padding: [5, 10],
                data: dates,
                formatter: function (name) {
                    //通过name也就是version进行数据处理
                    var total = 0;
                    var target = 0;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if ((data[i].name == name) && data[i].value) {
                            target = data[i].value;
                        }
                    }
                    var newName = ''
                    if (name.length > 25) {
                        newName = name.slice(0, 25) + '...'
                    } else {
                        newName = name
                    }
                    var crashTimesNew = 0
                    if (crashTimes[name]) {
                        crashTimesNew = crashTimes[name]
                    }
                    var crashDeviceRatioNew = '0%'
                    if (crashOther[name] && crashOther[name]['crashDeviceRatio']) {
                        crashDeviceRatioNew = crashOther[name]['crashDeviceRatio']
                    }
                    var deviceAverageNew = 0
                    if (crashOther[name] && crashOther[name]['deviceAverage']) {
                        deviceAverageNew = crashOther[name]['deviceAverage']
                    }
                    var averagePerSetNew = 0
                    if (crashOther[name] && crashOther[name]['averagePerSet']) {
                        averagePerSetNew = crashOther[name]['averagePerSet']
                    }
                    var arr = [                    
                        '{a|' + newName + '}',
                        '{b|　' + crashTimesNew + '}',
                        '{c|' + target + '}',
                        '{d|' + crashDeviceRatioNew + '}',
                        '{e|' + deviceAverageNew + '}',
                        '{f|' + averagePerSetNew + '}',

                    ]
                    if(proVersion.includes(name)){
                        arr.splice(1, 0, "{g|}")
                    }else{
                        arr.splice(1, 0, "{h|}")
                    }
                    return arr.join('')

                },
                textStyle: {
                    color: '#7a7a7a',
                    rich: {
                        a: {
                            fontSize: "14px",
                            width: 138,
                            lineHeight: 25,
                            top: '0px',
                            color: '#000'
                        },
                        //背景图
                        g:{
                            backgroundColor: {
                                image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAV1JREFUWEftmCFPQzEUhc+dIMFgUBgMon3JPAJFMsMkCrGE4PkFCCBB7BfgCckECjlFMoWAHwAYQrtHggGDYXcvLXkbiLeMvWwDekWfbZp+Pef0tu8ShH8knA8TAe9WF44LG3Cuk6RZ5z83VQpIwNE3kHduMwKO2DOVgn9sbUtbboyuIQXwlbzfUt3+rUxAwqE2fDLOIQkKXmvLGz/FJzggEdWV6bVFAnrgLLG8N+nwhVTwRVteKasM4QAJDW24JRPQo627XC+Dy8eDKJg5Xq6meBMLiEVe0g94lwsIXGjLO5IBQajUlP24KoMMksGv8D8qy2tiAXMwDxwklptSC/WAK3N+vZr2b0RedQOrCZfK8LZYwCEk7SvTO5X63Mq5nqmCmnrie5kP1uGBOU8s784FGP/qxoRwqkIdFYwKll2sM4zHDM4gWmFKVDAqKL6BWbBIWgt43vz8xnzxXf5P5D3vKX3qWRoAAAAASUVORK5CYII='
                            },
                            fontSize: "14px",
                            width: 20,
                            lineHeight: 25,
                        }, 
                        h:{
                            fontSize: "14px",
                            width: 20,
                            lineHeight: 25,
                        },
                        b: {
                            fontSize: "14px",
                            width: 80,
                            lineHeight: 25,

                        },
                        c: {
                            fontSize: "14px",
                            width: 75,
                            lineHeight: 25,

                        },
                        d: {
                            fontSize: "14px",
                            width: 80,
                            lineHeight: 25,

                        },
                        e: {
                            fontSize: "14px",
                            width: 100,
                            lineHeight: 25,

                        },
                        f: {
                            fontSize: "14px",
                            width: 80,
                            lineHeight: 25,
                        },
                    }
                }
            },
            series: [{
                type: 'pie',
                //环形显示饼状图，实际上显示的是50-80之间的部分
                //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
                radius: ['70', '120'],
                center: ['150', '125'],
                // hoverAnimation: false, //鼠标移入变大
                // silent: true,
                data: data,
                label: {
                    //将视觉引导图关闭
                    show: false,
                    position: 'center',
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{d}' + '%',
                            position: 'inner',
                            color: "#ffffff"
                        },
                        //设置的是每项之间的留白
//                          borderWidth: 3,
//                          borderColor: '#fff'
                    },

                },
                // 初始化echarts的动画效果
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }],
        };