echarts 圆图带图片显示

已于 2022-12-01 16:09:31 修改
阅读量3.1k 收藏 6
点赞数
分类专栏： echarts css 文章标签： echarts图片显示 echart 圆  echart圆添加图片 echart 显示虚线
于 2019-12-12 15:11:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43856422/article/details/103508805
版权

直接先上效果图

在这里插入图片描述

自我认为的难点分析

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; }),
                    }, ]
                }
莫道 开发
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Echarts地图+覆盖物提示框轮播效果
02-18
提示：springboot项目，下载之后需要运行该项目，然后才能访问看到效果。代码不多，谨慎下载。...主要功能：地图缩放拖动、区域点击往返市区地图、双击地图全屏放大、轮播带图片提示框 需要的快去下载吧！！！
echarts实现3D环装饼图带引导线效果
01-25
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库，它提供丰富的可视化图表类型，适用于各种数据可视化需求。在本项目中，我们将探讨如何使用ECharts实现一个3D环状饼图，并...
Echarts 饼图中心添加图片
工作中遇到问题记录
10-31 1700
Echarts 饼图中心添加图片
封装通用 ECharts 图表组件（三）：环形图实现
m0_54340021的博客
05-28 954
本文详细介绍了封装ECharts环形图组件的步骤和优势。环形图作为一种展示占比关系的有效图表，具有视觉上的吸引力。封装组件不仅可以提高代码复用率，简化维护工作，还能增强组件的灵活性。文章通过实例代码，展示了从引入依赖、创建Vue组件、定义数据、配置计算属性到样式定义的完整流程。计算属性pieOption是核心，它负责生成图表的颜色、网格、提示框和系列等配置。最终，封装后的组件能够在Vue项目中轻松复用，提升开发和维护效率。希望本文能帮助读者深入理解并实现自定义的ECharts组件。
echarts圆柱形带背景图
js0918may的博客
06-14 3692
项目有时需要我们将二维的柱状图做出立体的感觉出来,这里是将一个数据柱形放在了后面当背景图使用
【Echarts系列】带图片的饼图
最新发布
kk爱闹
06-11 600
在饼图中添加图片，也可以添加动态旋转效果【根据版本来决定是否生效】
echarts 饼状图中间 添加图片不显示
gxh287010的博客
07-26 551
解决方法：添加require（"图片路径"）可以解决（仅供参考）
Echarts设置背景图片无法显示的问题
weixin_45784423的博客
03-03 2132
echarts官方文档引用的提示 试了一下发现外链是可以直接显示的 但是引用本地路径’./image/xxx’并没有效果 后来试了一下require()解决了
echarts 圆环图中间插图或文字
热门推荐
wingox0614的博客
03-09 1万+
echarts 圆环图中间插图或文字
echarts 实现圆环图效果配置
u011489056的专栏
05-06 380
【代码】echarts 实现圆环图效果配置。
ECharts柱状图设置圆角borderRadius
m0_59250071的博客
10-19 4613
我们通过查阅官方文档发现可以通过 series-bar.data.itemStyle. borderRadius 来单独设置圆角。官方文档说上可以利用series-bar.itemStyle. borderRadius来给全体设置圆角。
图片环形3d效果
08-30
在IT行业中，图片的视觉呈现方式多种多样，其中一种引人注目的效果是“图片环形3D效果”。这种效果通常用于网站设计、应用程序界面、数字艺术作品等，以增加用户体验的吸引力和互动性。本篇文章将深入探讨“图片环形...
echarts关系图
05-07
- ECharts关系图支持节点和边的点击、鼠标悬浮等交互事件，可以定制相应的响应函数，实现例如跳转链接、显示详细信息等功能。 - 动画效果可以设置在数据加载或图表更新时启用，提供更丰富的视觉体验。 4. **实例...
ECharts-GL 3D地球实例（动态改变自转、加载去空白圆心）
05-11
ECharts-GL是一款基于ECharts扩展的3D图表库，它为用户提供了丰富的3D可视化效果，包括3D地球、3D柱状图等。在本实例中，我们将重点探讨如何实现ECharts-GL 3D地球的动态自转、解决加载时出现空白圆心的问题，以及...
echarts 两个x轴只显示一个tooltip
weixin_43856422的博客
12-20 7270
先上图 两个x轴，且本应有两个tooltip,通过以下修改可以是一个tootip，且修改tooltip样式。 问题一：只保留一个tooltip tooltip直接设置是全局模式，有几个x轴显示几个x轴的tooltip，可以通过设置axisPointer进行去除。 代码展现： xAxis:[{ },{ //去除第二个x轴的tooltip axisPointer: { ...
echarts 词云
weixin_43856422的博客
11-20 2561
由于echarts2以后的版本中都没有字符云，所以在使用的时候需要先把字符云组件引入 首先下载字符云 cnpm install echarts-wordcloud //添加字符云，前提要有echarts import 'echarts-wordcloud/dist/echarts-wordcloud' import 'echarts-wordcloud/dist/echarts-wordclou...
echarts 折线图
weixin_43856422的博客
12-12 1559
先上图片 自我认为难点 1.折线的不同颜色 color:["#4ff1ff","#91c720","#fa1e7d","#face1f"], //折线颜色 通过将折线图的颜色放到全局引用 2.折线变平滑 symbol:‘none’, //这句就是去掉点的 smooth:true, //这句就是让曲线变平滑的 3.轴刻度下移动 offset:20,//轴显示值对于轴的距离 4.刻度线，网格线，...
echart显示自定义图标
weixin_43856422的博客
06-24 1111
可以通过矢量图标实现自定义需求 实现方式 在阿里图标中找到想要的图标，然后将svg改为矢量图标 <svg t="1592984597912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3428" width="200" height="200"> <path d="M512 896C299.936 896 128 724.064 128 512S2.
vue echarts 显示图片
04-18
要在Vue Echarts中显示图片，可以使用Echarts的自定义系列（custom series）功能。具体步骤如下： 1. 首先，确保你已经安装了Vue Echarts库。可以通过npm或yarn进行安装。 2. 在Vue组件中引入Echarts，并创建一个...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值