直接先上效果图

自我认为的难点分析

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; }),}, ]}

echarts 圆图带图片显示相关推荐

Android初级，Toast的带图片显示
在我们学习到消息框的时候,入门的即使toast了,也叫土司,就是在手机连接WIFI断开的时候出现在手机底部居中的那一个小信息框: 这个消息只用到一条语句,在第一个按钮的点击响应函数里面: 这里就这几一 ...
怎么让自己的网站在百度搜索中带图片显示
原文地址:https://zhidao.baidu.com/question/747416635153908252.html 方法如下:1.注册并登录百度站长平台zhanzhang.baidu.com ...
如何让百度搜索结果带图片
百度搜索你网站,在搜索结果的左侧显示图片的话,可提高你网站的点击率.截止到2019年6月,已经不能通过提交logo来让site你的域名在搜索结果左侧显示图片了,再者就算是提交了,也不一定能通过.这样以 ...
将Echarts图表保存为图片【使用自定义下载按钮，不用Echarts自带下载功能】
因为前端UI设计的Echarts图表的下载按钮是自定义的,但是Echarts自带工具栏的图表下载按钮是固定的不能改变,所以我们需要另写一个方法: 具体做法如下: 1.首先创建一个div来展示我们的Ec ...
itext html转pdf 图片,itext2.0.8 将 HTML 转换成 PDF, 完美 CSS, 带图片, 自动分页
itext2.0.8 将 HTML 转换成 PDF, 完美 CSS, 带图片, 自动分页之前用 itext7 将 html 导出为 PDF, 比较方便, 代码较少, 而且支持 base64 的图片. ...
实现html和word的相互转换（带图片）
项目后端使用了springboot,maven,前端使用了ckeditor富文本编辑器.目前从html转换的word为doc格式,而图片处理支持的是docx格式,所以需要手动把doc另存为docx,然 ...
Echarts 实现自定义图片关系图
百度echart 实现带图片头像的关系图 <!DOCTYPE html> <html style="height: 100%"><head>&l ...
负数显示红字html语言,需要将单元格内的负数显示为红色且不带负号显示两位小数的格式代码是下面哪一种A、 0.00;[红色...
需要将单元格内的负数显示为红色且不带负号显示两位小数的格式代码是下面哪一种A. 0.00;[红色更多相关问题 SPEC性能测试能比时钟频率更全面地反映计算机处理器.存储结构和编译器的性能.它有两种表 ...
自定义Android带图片的按钮
自定义Android带图片的按钮前言现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标 ...

echarts 圆图带图片显示

直接先上效果图

自我认为的难点分析

1. legend的图片显示

2. legend的echart图上图片显示

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

全部代码

echarts 圆图带图片显示相关推荐

最新文章

热门文章