echarts 圆图带图片显示

直接先上效果图

自我认为的难点分析

1. legend的图片显示

查找了很多的资料，和官方文档，图片选用本地地址出不来，所以我选择base64格式图片，通过转换png得到，通过  itemWidth修改icon宽 itemHeight修改icon高 ，itemGap:修改两个icon距离。

2. legend的echart图上图片显示

2.1直接上代码

formatter:function(params){
     console.log(params);
	return '{p' + '|'+params.percent+'%}'+'{n' + '|'+params.data.value+'}'+"\n"+
     		{'+params.data.pid+'|}'+'{name' + '|'+params.data.name+'}'
                                },

通过代码进行解释
formatter函数可能大家刚学有点懵逼，可以通过console.log将信息打印出来，自己看一下。 
	formatter本来的格式是这样的
	formatter: [ '{d|{d}%} {c|{c}}','{f|} {b|{b}}'].join('\n'),
	d是最后数据并可以进行格式修改
	{d} 是取数

我进行自己需求的修改
formatter函数进行数据的处理，通过’{p’ + ‘|’+params.percent+‘%}’ 进行数据的格式处理，通过 params.data.pid 进行图片的选择。

3. 图片的大小修改，以及图片和文字的间距

通过height可以进行图片修改
padding:[0,0,0,0] 进行间距修改 分别代表上右下左

全部代码

option = {
                    color: [ "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
                    grid: {
                        left: 0,
                        top: "0%",
                        bottom: 0,
                        right: "20%",
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },

                    legend: {
                        type: "scroll",
                        orient: "vartical",
                        // x: "right",
                        top: "center",
                        right: "15",
              /*          padding:[0,0,0,400],*/
                        // bottom: "0%",
                        itemWidth: 30,//修改icon宽
                        itemHeight: 30,//修改icon高
                        itemGap: 51,//修改两个legend距离
                        textStyle: {
                            color: '#A3E2F4',
                            fontSize: 32,
                            fontWeight: 0,
                            padding:[0,10,0,10]
                        },
                        data:[
                            {
                                name:'PC',

                                icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAjCAYAAAD48HgdAAAB5klEQVRYhe3Yv2sUQRjG8c+eGwUxIRaicqlVrETsBAtt1EYQwVNEAtaCYiP4D9hYiL0XFAsVC7UOImohNhYiWEXkMCpIlHS5Xxazy92Jye1m490V98CwvMM773539n2HmYnq1TLcxwWjoTc4EeMx9uES4qEisYJzeB3jDCp4OAySeLbWYzfmZj7ibSmxpwdOtLp2QwpWWsNx0IoYLaAejcHyagyWV2OwvBqD5dUYLK/GYHk18mA/h0rRqx+ErXQTh5OOTYOmaMzNdJtNHEEzqlfLvzGVdA7717aEyVmOMYnruId2gaDfkueuYmyO424sbGW/YrFgwJ2YQK2fY7f+cRj5gig9rm0rCEVnxibQKBBnis45skigVFeSoEVjNemArRQMBrc3IAYsQVSvlm/iKt7LfhJvYUFI9EmdomkLOZvaC0Ka7MgYt4m9mI+FipzGKdmrMsYh/ML3xC4lUKWudjDxz1pYEV7Gs7XTUXKpsh7NC7/v2Ro+H3ADT1dz+LsqU613Qd2Do1ju47dduBfJrbxgW4VZ+oRHeNHHv5K05zjwv8Au4x324yTOZhjzSlh4l3ALd7K+LGsVPsB54crqSdK3BZv7jGsLm4OLQgUvCh92bKPAZoR8quBajnGpWsKsfRbyrq/+ALgaXTE+PTtGAAAAAElFTkSuQmCC'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                            },
                            {
                                name:'Pad',
                                icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAeCAYAAABaKIzgAAABRUlEQVRYhe3WsUrDUBSH8V9j1CJ0cXVyF3wK6+Ym6BsIziK4W52cXH0AHcTJwcXBR/AF+gYiggpW65CodzBJkZjbQj8I/HOTGz4OOZfTWjscwim2MGf8uMV2imPsRpYpYwOXCfZjm4zAeopXtAteeMAeho0p/TCPE5nbc4o3xaKPOPtPm5uD4mfdniOZ23tS8Z1ZzNSnNTrdng6+/apEx4apaN1MjGga5AFe8rwgUhMVEVb0Gkv5dRdHp5iwos94yvNrBJdSwoqGA8ls0yJVTEwzTUXrJhQdBPm9aZEqkoLcalqkivB4Wsd9npcjuJQSinawEkukiolsprFmKlo3VaIDkc7UmwNP+Pi6T5XPnR1syoT/5Wzt9n5dHspm4q9BKUnzhSIWcVGr2d9oJ7iKbTEC/RTbOMeqrNQfpVuaI5H9cn3sfAJJkCwHzcdUVgAAAABJRU5ErkJggg=='//格式为'image://+icon文件地址'，其中image::后的//不能省略
                            },
                            {
                                name:'短信',
                                icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAC90lEQVRYhe3YT6hUZRjH8c85XAuvld26EVaQ/0hBuThu2rTqn0SLFkkEFQQJCmJEkln0B9yEEUYUboM2JVG0aGGbgghbVDNqC0kvtohrmWIS/dHy3tPifc+dM/eeOTON04xIP3g57/O8D+f9njlz3ud530Q9gxSv4h6MY8TgNY2z+BrPZTVTiXo2ikNYOQSgdvod60ewUxPsA+zCCWRIBgCSxTaOzXgai/DmCO6LQZ9h4wBgWslqs90z2J40XMAOTKQYjYObBg1WpqzmWczg6hQLo//48JDm6SxGU+F9w5VDhJmrGWRFuEH8+btVIsJdsvofrlddNnBX4F6srohZgQ0Yq4hZH2M6qlu4tfgOn+AItpbEPIRJ7McxTJTE7MI3MaauQz7vFm4vlhbst3BLwb4V+wr29Xhfa3VzO14s2DW83g+4NSW+Owv9u0vGb8N1BfuOkpjlVZN2C/dtie+LQv9Ayfj3QjLP9WVJzGTVpN3CbcHR2P8T27Xm4iN4BL9F+7hQ4VwoxBzAKwXfQTxZNWmink0KX9lCnOsAOYGf8HOb8XHchMMV97g5xh2ipWRqQjWcxrX/thyvmhROx1alqdg66rJZhAeuIlzWNmrwmt0S5oDnh8dSqjTVhLpmmCRztBh/p/gjOvYMEWZWScPjWIAzKb6K/ifw/LCgIGl4FG9HcypRz5YIm+hcp4S0Mm3+viIVMsRfQoVRlpKK2ot1sT9TxYUlWFbw3TWCH4UK4QXcjxti66R3K+BWx/F1bcbbKcPn2JPVfJpniINCLhzDVdo/5Xlsw0uaeXSuHsBHsf8eXhb2oQs6gKU4l9Wcyh1z09cvsVXph4qx3cJRAjyD1zrcqzS35urlqCtfcooL+I14Ryjjp/Cw1pKqJ13MOdyv8bpBOJ1ahA/xmObydFHqJbfmX/BJ4bBxfwTbjQf7BUZvv9x0vO7DKuEj2YiP+wWVqxe4PN2tQkM43zvZN6KCenmtS+P1DWEP+p+A0RvcCWGZeKrPLPP0Dxhbm6c6AoT7AAAAAElFTkSuQmCC'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                            },
                            {
                                name:'移动端',
                                icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAoCAYAAAACJPERAAAChElEQVRYhdXXT2gWRxjH8c/GJVaQgq0FPbgUJKJFSy095L1IEA8urVoopeCfg6AgQi+KtNSbBetFJSKiIAqeeuofxLyFYj3Ysggi6MmDoHnFtqASsSK2TYyHndVFDO68JgF/sMzMszPPd/d5Zmdmk+GhfkEpPsdyzMaYV1cPHuEqfsjy4i4kATqAU1gwCaCJ9A92ZXlxLBke6p+Fv/Em7uEwHiCZBNA4Zigj+EGwLU2xPgDv4D3cjvGa5UWTbns77dZlvI9vevBhuPFrLDBSh0LZl3oWxnewNNQbh7bTbr2sy3i4loT2/ylGQ2MAP8ZCG2oM71b1tHbjN2ycZFilcezE10jq0BFd5LThRNJpt25W9Z6afWYsMFKzXwSdNr0KNMPKbgamL+8yoS4oV66+6YLOxTzlahatbsP7aSh/nk7ot7iCh90M7ia8y5Wh/Rg67dYc5bp6MMuLS00cdPOmu0NZAXrxRYyvWGiKz/BHzdaH1VleXJwq6ALlcvllzXYen8Q4ic3pdbxVa28J5XcxTmLf9CesqLX3oZPlRdRGEQPdhHXKM0+lt3EyBhgLvYc9OBfag6E8EAuNyenpcFUaVX6b96cS+rx2djvwtdtPX1/ogylmPf2W6xNpGTbEempw2KY8gq55EXSx8lxKs8P2WOjXJEWjWFg9QB16RrmDRCni3LsD+5HUn3I8gtWLE8q1t6me+u/R3Qzuw2Z81Wm33mg4puIkqWd5jfndv4atGMny4lHDMVW/3hQ3QuOjCOi/OB7RH9aGciQZHuqfjz+D4Rd8j/9M7u9/C9uDbVWKv7ANR7E6XFOlwSwvzlb5PIbflTvHImWeY2bzRErwGLdwJMuLc/AEeomHPW2afpUAAAAASUVORK5CYII='//格式为'image://+icon文件地址'，其中image::后的//不能省略
                            },
                            {
                                name:'二维码',
                                icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAlCAYAAAAuqZsAAAAEOElEQVRYhc3YW6gVVRgH8N/M2ZYeRTFFi+xKBr1oFGFwoE3QBSrYQQRCvUT0Vi9FoBAc6CWJHqKH6GI9RFGCxDlFSdnD2QbdrSxMku6KWlZm2fHu9LBmOnPmrNlntgb2h2HNfGvNN/+11rf+61uTGBuBIdyLizAfJ0wgxSEcye8TZNiFDXhSHB3chsU4WqnLsACzSt8awD6szdqdlxJjI7fg9RrnTbAGqyu2O/DiKfi8PzE2sgNLsB4vCz1Ip3nxMC7GYzgDS/FNXjcDB4UReBSbcOY0/jIcx1V4CMcSYyO7cTbOx46++sVmXIEb8XZuW1Lyk0znIGt3Jj0n3dHjSFOh97CoT1LlDx+vqR/sy1l3tPCXtYRhJAx9vyimvLxYstJ91ecCnCN0ZAA78UfEX9bq8dFHcHnJySEM44t+mJdwCT7DnJJtX9IdHcranW3VxnXEBrAqYt90CsTOrZAiSNNSTCHWa/Xtitj+PElShJUaw98xYy9isZirW2XTrj5BVmKYFTPWEcsExZ7OSUGoquwx/FZjj0pUXYydwEpcVrIdw2hN+ybEtuEazBM6nuDXrN3ZUkfsX+2o1K1r8LHinfJUppH6Au829Cc1MT0/NiBSRTFSM0q2stge6MdZ1u4Uepi28JOg+sN4tQ8/F+DS/P6vkv1njAuq/yA+7eUk6U6KjuXCYB1MjI10MNIHoSq6uNbkaVslCPTJ4vGWENAd3IPzTN5e6pDiF2wUMoxqLK0RpvF2Idib+tyFV7J254UkTxRPG6rZRYHp8q7Thv8tsUJg5wjit9jEci9EcLDUdlCIl0zIzz/GlzW+B4SMdLepUjQXy/J390PSHW3havyQtTs7W0Lm+oGQJ50M7sbzEfuQsGK3COlTGauFlTuMh3PbckGAN+CmFp7KSX2OTwTRPCK+I5wwMcrzcSeewxuCfpUxOy9jWexZkbqZZVsLK3LDSnwdcdILy0rXxkpdsRvMNhXjeXmoZCuymdmE4C+2jZn6x7G8jOnUVmEU34rUxdKk7cIusZ4wYoXT6Y5YMRS9jBH7Vjh9xTA3L+cVhqzd2YMri+deOf99uF4YlRZ+FwJ2TyPKAW18L+zHZXyIu/BVYUi6oyluxtas3fmujtggnojY38MzDUmtwJggCcsqdU9jrcmZyHK8JsTqDXUCO8PkwCzQJIUusDAv60JkfuW5rJd9K3/dZhwjXHQsdtgYxl48ULIVud3BXsSOiq/S6oGin5y/jCV5WSvqdTE2LijyUMl2BG/WtO+X2IFK2ZgYYbibop/Ya4TUxPRUt5QmKH7I/OdZSvGHEK4TBDPNy9jVKpFYLOT99D4cx0inlTZT2qd4NjesFVbE4QbXXkFoFwniGTsbFosnFuCF8pclo5CVhYQRGMaFuLX0Qi+k+cvj+EjIMPZH2m0W0ph3InXrhJ8p5bx+O96X75X/ACvH9n6cR5PXAAAAAElFTkSuQmCC'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                            }
                        ]



                    },
                    polar: {},
                    angleAxis: {
                        interval: 1,
                        type: 'category',
                        data: [],
                        z: 10,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#0B4A6B",
                                width: 1,
                                type: "solid"
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            show: true,
                            color: "#0B4A6B",
                            margin: 8,
                            fontSize: 16
                        },
                    },
                    radiusAxis: {             //坐标轴
                        min: 10,
                        max: 90,
                        interval: 30,         //间隔
                        axisLine: {           //坐标轴线
                            show: false,
                            lineStyle: {
                                color: "#0B3E5E",
                                width: 1,
                                type: "solid"
                            },
                        },
                        axisLabel: {          //坐标轴标尺
                            formatter: '{value} %', //坐标轴值
                            show: false,
                            padding: [0, 0, 20, 0],
                            color: "#0B3E5E",
                            fontSize: 16
                        },
                        splitLine: {         //网格线
                            lineStyle: {        //线的样式
                                color: "#07385e",
                                width: 2,
                                type: "dashed"
                            }
                        }
                    },

                    calculable: true,
                    series: [{
                        type: 'pie',
                        radius: ["5%", "10%"],
                        hoverAnimation: false,
                        legendHoverLink:false,
                        tooltip:{show:false},
                        labelLine: {
                            normal: {
                                show: false,
                                length: 25,
                                length2: 55
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: [{
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: "#0B4A6B"
                                }
                            }
                        }]
                    }, {
                        type: 'pie',
                        radius: ["88%", "90%"],
                        hoverAnimation: false,
                        avoidLabelOverlap: false,
                        legendHoverLink:false,
                        tooltip:{show:false},
                        labelLine: {
                            normal: {
                                show: false,
                                length: 30,
                                length2: 55
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: [{
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: "#0B4A6B"
                                }
                            }
                        }]
                    },{
                        stack: 'a',  //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                        type: 'pie',
                        radius: ['20%', '77%'], //内圆大小和外圆大小
                        roseType: 'area',
                        zlevel:10,
                        label: {
                            normal: {
                                // formatter: [ '{d|{d}%} {c|{c}}','{f|} {b|{b}}'].join('\n'),
                                formatter:function(params){
                                    console.log(params);
                                    return '{p' + '|'+params.percent+'%}'+'{n' + '|'+params.data.value+'}'+"\n"+
                                            '{'+params.data.pid+'|}'+'{name' + '|'+params.data.name+'}'
                                },
                                rich: {
                                    n: {
                                        color: '#3bd2fe',
                                        fontSize: 38,
                                        lineHeight: 39
                                    },
                                    p: {
                                        color: '#3bd2fe',
                                        fontSize: 25,
                                        lineHeight: 39,
                                        padding:[0,13,0,0]
                                    },
                                    name: {
                                        color: '#d0fffc',
                                        fontSize: 30,
                                        height: 35,
                                        itemGap:10,
                                        padding:[0,0,0,13],
                                    },
                                    pc:{
                                        backgroundColor: {
                                            image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAjCAYAAAD48HgdAAAB5klEQVRYhe3Yv2sUQRjG8c+eGwUxIRaicqlVrETsBAtt1EYQwVNEAtaCYiP4D9hYiL0XFAsVC7UOImohNhYiWEXkMCpIlHS5Xxazy92Jye1m490V98CwvMM773539n2HmYnq1TLcxwWjoTc4EeMx9uES4qEisYJzeB3jDCp4OAySeLbWYzfmZj7ibSmxpwdOtLp2QwpWWsNx0IoYLaAejcHyagyWV2OwvBqD5dUYLK/GYHk18mA/h0rRqx+ErXQTh5OOTYOmaMzNdJtNHEEzqlfLvzGVdA7717aEyVmOMYnruId2gaDfkueuYmyO424sbGW/YrFgwJ2YQK2fY7f+cRj5gig9rm0rCEVnxibQKBBnis45skigVFeSoEVjNemArRQMBrc3IAYsQVSvlm/iKt7LfhJvYUFI9EmdomkLOZvaC0Ka7MgYt4m9mI+FipzGKdmrMsYh/ML3xC4lUKWudjDxz1pYEV7Gs7XTUXKpsh7NC7/v2Ro+H3ADT1dz+LsqU613Qd2Do1ju47dduBfJrbxgW4VZ+oRHeNHHv5K05zjwv8Au4x324yTOZhjzSlh4l3ALd7K+LGsVPsB54crqSdK3BZv7jGsLm4OLQgUvCh92bKPAZoR8quBajnGpWsKsfRbyrq/+ALgaXTE+PTtGAAAAAElFTkSuQmCC'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                                        },
                                        height: 20,
                                        // padding:[0,10,0,0]
                                    },
                                    pad:{
                                        backgroundColor: {
                                            image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAeCAYAAABaKIzgAAABRUlEQVRYhe3WsUrDUBSH8V9j1CJ0cXVyF3wK6+Ym6BsIziK4W52cXH0AHcTJwcXBR/AF+gYiggpW65CodzBJkZjbQj8I/HOTGz4OOZfTWjscwim2MGf8uMV2imPsRpYpYwOXCfZjm4zAeopXtAteeMAeho0p/TCPE5nbc4o3xaKPOPtPm5uD4mfdniOZ23tS8Z1ZzNSnNTrdng6+/apEx4apaN1MjGga5AFe8rwgUhMVEVb0Gkv5dRdHp5iwos94yvNrBJdSwoqGA8ls0yJVTEwzTUXrJhQdBPm9aZEqkoLcalqkivB4Wsd9npcjuJQSinawEkukiolsprFmKlo3VaIDkc7UmwNP+Pi6T5XPnR1syoT/5Wzt9n5dHspm4q9BKUnzhSIWcVGr2d9oJ7iKbTEC/RTbOMeqrNQfpVuaI5H9cn3sfAJJkCwHzcdUVgAAAABJRU5ErkJggg=='//格式为'image://+icon文件地址'，其中image::后的//不能省略
                                        },
                                        height: 20,
                                    },
                                    message:{
                                        backgroundColor: {
                                            image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAC90lEQVRYhe3YT6hUZRjH8c85XAuvld26EVaQ/0hBuThu2rTqn0SLFkkEFQQJCmJEkln0B9yEEUYUboM2JVG0aGGbgghbVDNqC0kvtohrmWIS/dHy3tPifc+dM/eeOTON04xIP3g57/O8D+f9njlz3ud530Q9gxSv4h6MY8TgNY2z+BrPZTVTiXo2ikNYOQSgdvod60ewUxPsA+zCCWRIBgCSxTaOzXgai/DmCO6LQZ9h4wBgWslqs90z2J40XMAOTKQYjYObBg1WpqzmWczg6hQLo//48JDm6SxGU+F9w5VDhJmrGWRFuEH8+btVIsJdsvofrlddNnBX4F6srohZgQ0Yq4hZH2M6qlu4tfgOn+AItpbEPIRJ7McxTJTE7MI3MaauQz7vFm4vlhbst3BLwb4V+wr29Xhfa3VzO14s2DW83g+4NSW+Owv9u0vGb8N1BfuOkpjlVZN2C/dtie+LQv9Ayfj3QjLP9WVJzGTVpN3CbcHR2P8T27Xm4iN4BL9F+7hQ4VwoxBzAKwXfQTxZNWmink0KX9lCnOsAOYGf8HOb8XHchMMV97g5xh2ipWRqQjWcxrX/thyvmhROx1alqdg66rJZhAeuIlzWNmrwmt0S5oDnh8dSqjTVhLpmmCRztBh/p/gjOvYMEWZWScPjWIAzKb6K/ifw/LCgIGl4FG9HcypRz5YIm+hcp4S0Mm3+viIVMsRfQoVRlpKK2ot1sT9TxYUlWFbw3TWCH4UK4QXcjxti66R3K+BWx/F1bcbbKcPn2JPVfJpniINCLhzDVdo/5Xlsw0uaeXSuHsBHsf8eXhb2oQs6gKU4l9Wcyh1z09cvsVXph4qx3cJRAjyD1zrcqzS35urlqCtfcooL+I14Ryjjp/Cw1pKqJ13MOdyv8bpBOJ1ahA/xmObydFHqJbfmX/BJ4bBxfwTbjQf7BUZvv9x0vO7DKuEj2YiP+wWVqxe4PN2tQkM43zvZN6KCenmtS+P1DWEP+p+A0RvcCWGZeKrPLPP0Dxhbm6c6AoT7AAAAAElFTkSuQmCC'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                                        },
                                        height: 20,
                                    },
                                    phone:{
                                        backgroundColor: {
                                            image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAoCAYAAAACJPERAAAChElEQVRYhdXXT2gWRxjH8c/GJVaQgq0FPbgUJKJFSy095L1IEA8urVoopeCfg6AgQi+KtNSbBetFJSKiIAqeeuofxLyFYj3Ysggi6MmDoHnFtqASsSK2TYyHndVFDO68JgF/sMzMszPPd/d5Zmdmk+GhfkEpPsdyzMaYV1cPHuEqfsjy4i4kATqAU1gwCaCJ9A92ZXlxLBke6p+Fv/Em7uEwHiCZBNA4Zigj+EGwLU2xPgDv4D3cjvGa5UWTbns77dZlvI9vevBhuPFrLDBSh0LZl3oWxnewNNQbh7bTbr2sy3i4loT2/ylGQ2MAP8ZCG2oM71b1tHbjN2ycZFilcezE10jq0BFd5LThRNJpt25W9Z6afWYsMFKzXwSdNr0KNMPKbgamL+8yoS4oV66+6YLOxTzlahatbsP7aSh/nk7ot7iCh90M7ia8y5Wh/Rg67dYc5bp6MMuLS00cdPOmu0NZAXrxRYyvWGiKz/BHzdaH1VleXJwq6ALlcvllzXYen8Q4ic3pdbxVa28J5XcxTmLf9CesqLX3oZPlRdRGEQPdhHXKM0+lt3EyBhgLvYc9OBfag6E8EAuNyenpcFUaVX6b96cS+rx2djvwtdtPX1/ogylmPf2W6xNpGTbEempw2KY8gq55EXSx8lxKs8P2WOjXJEWjWFg9QB16RrmDRCni3LsD+5HUn3I8gtWLE8q1t6me+u/R3Qzuw2Z81Wm33mg4puIkqWd5jfndv4atGMny4lHDMVW/3hQ3QuOjCOi/OB7RH9aGciQZHuqfjz+D4Rd8j/9M7u9/C9uDbVWKv7ANR7E6XFOlwSwvzlb5PIbflTvHImWeY2bzRErwGLdwJMuLc/AEeomHPW2afpUAAAAASUVORK5CYII='//格式为'image://+icon文件地址'，其中image::后的//不能省略
                                        },
                                        height: 20,
                                    },
                                    code:{
                                        backgroundColor: {
                                            image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAlCAYAAAAuqZsAAAAEOElEQVRYhc3YW6gVVRgH8N/M2ZYeRTFFi+xKBr1oFGFwoE3QBSrYQQRCvUT0Vi9FoBAc6CWJHqKH6GI9RFGCxDlFSdnD2QbdrSxMku6KWlZm2fHu9LBmOnPmrNlntgb2h2HNfGvNN/+11rf+61uTGBuBIdyLizAfJ0wgxSEcye8TZNiFDXhSHB3chsU4WqnLsACzSt8awD6szdqdlxJjI7fg9RrnTbAGqyu2O/DiKfi8PzE2sgNLsB4vCz1Ip3nxMC7GYzgDS/FNXjcDB4UReBSbcOY0/jIcx1V4CMcSYyO7cTbOx46++sVmXIEb8XZuW1Lyk0znIGt3Jj0n3dHjSFOh97CoT1LlDx+vqR/sy1l3tPCXtYRhJAx9vyimvLxYstJ91ecCnCN0ZAA78UfEX9bq8dFHcHnJySEM44t+mJdwCT7DnJJtX9IdHcranW3VxnXEBrAqYt90CsTOrZAiSNNSTCHWa/Xtitj+PElShJUaw98xYy9isZirW2XTrj5BVmKYFTPWEcsExZ7OSUGoquwx/FZjj0pUXYydwEpcVrIdw2hN+ybEtuEazBM6nuDXrN3ZUkfsX+2o1K1r8LHinfJUppH6Au829Cc1MT0/NiBSRTFSM0q2stge6MdZ1u4Uepi28JOg+sN4tQ8/F+DS/P6vkv1njAuq/yA+7eUk6U6KjuXCYB1MjI10MNIHoSq6uNbkaVslCPTJ4vGWENAd3IPzTN5e6pDiF2wUMoxqLK0RpvF2Idib+tyFV7J254UkTxRPG6rZRYHp8q7Thv8tsUJg5wjit9jEci9EcLDUdlCIl0zIzz/GlzW+B4SMdLepUjQXy/J390PSHW3havyQtTs7W0Lm+oGQJ50M7sbzEfuQsGK3COlTGauFlTuMh3PbckGAN+CmFp7KSX2OTwTRPCK+I5wwMcrzcSeewxuCfpUxOy9jWexZkbqZZVsLK3LDSnwdcdILy0rXxkpdsRvMNhXjeXmoZCuymdmE4C+2jZn6x7G8jOnUVmEU34rUxdKk7cIusZ4wYoXT6Y5YMRS9jBH7Vjh9xTA3L+cVhqzd2YMri+deOf99uF4YlRZ+FwJ2TyPKAW18L+zHZXyIu/BVYUi6oyluxtas3fmujtggnojY38MzDUmtwJggCcsqdU9jrcmZyHK8JsTqDXUCO8PkwCzQJIUusDAv60JkfuW5rJd9K3/dZhwjXHQsdtgYxl48ULIVud3BXsSOiq/S6oGin5y/jCV5WSvqdTE2LijyUMl2BG/WtO+X2IFK2ZgYYbibop/Ya4TUxPRUt5QmKH7I/OdZSvGHEK4TBDPNy9jVKpFYLOT99D4cx0inlTZT2qd4NjesFVbE4QbXXkFoFwniGTsbFosnFuCF8pclo5CVhYQRGMaFuLX0Qi+k+cvj+EjIMPZH2m0W0ph3InXrhJ8p5bx+O96X75X/ACvH9n6cR5PXAAAAAElFTkSuQmCC'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                                        },
                                        height: 20,
                                    }
                                },
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 30,
                                length2: 50,
                                lineStyle:{
                                    width:3
                                }
                            },
                            emphasis: {
                                show: false
                            },

                        },
                        data:[
                            {value:335, name:'PC',pid:'pc'},
                            {value:310, name:'Pad',pid:'pad'},
                            {value:274, name:'短信',pid:'message'},
                            {value:235, name:'移动端',pid:'phone'},
                            {value:400, name:'二维码',pid:'code'}
                        ].sort(function (a, b) { return a.value - b.value; }),
                    }, ]
                }