echarts 饼图中间放图片

最新推荐文章于 2024-08-16 18:21:02 发布

咖啡不加糖�

最新推荐文章于 2024-08-16 18:21:02 发布

阅读量1k

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_43942866/article/details/132830673

版权

在这里插入图片描述

主要代码：

graphic: {//图形中间图片
            elements: [{
              type: "image",
              style: {
                image: require("@/assets/images/screen/patrolPage/pic.png"),//你的图片地址
                width: 57,
                height: 40,
              },
              left: "center",
              top: "center",
            }],
          },

全部代码

setOption() {
        this.option = {
          tooltip: {
            trigger: "item"
          },
          legend: {
            bottom:'3%',
            show: true,
            textStyle: {
              color: "#809ABE"
            },
            icon:'diamond',
            itemWidth:10,
            itemHeight:10
          },
          color:['#1A79FF','#FFA842','#42F4B7','#FBFF42','#EA5231'],
          graphic: {//图形中间图片
            elements: [{
              type: "image",
              style: {
                image: require("@/assets/images/screen/patrolPage/pic.png"),//你的图片地址
                width: 57,
                height: 40,
              },
              left: "center",
              top: "center",
            }],
          },
          series: [
            {
              name: '外边框',
              type: 'pie',
              clockWise: false,
              hoverAnimation: false,
              silent: true,
              z:1,
              center: ['50%', '50%'],
              radius: ["60%", "60%"],
              label: {
                  normal: {
                      show: false
                  }
              },
              data: [{
                  value: 2,
                  name: '',
                  itemStyle: {
                      normal: {
                          borderWidth: 2,
                          borderColor: '#1C243E'
                      }
                  }
              },{
                  value: 8,
                  name: '',
                  itemStyle: {
                      normal: {
                          borderWidth: 2,
                          borderColor: '#0E3D6F'
                      }
                  }
              }]
            },
            {
              type: "pie",
              center: ['50%', '50%'],
              radius: ["40%", "53%"],
              label: {
                show: true,
                color:'auto',
                formatter: function (v) {
                    console.log(v)
                  return `{a| ${v.percent}} {b|%}\n {c|${v.data.name}}`;
                },
                rich: {
                  hr: {
                    //auto自定义
                    width: 2,
                    height: 2,
                    borderRadius: 5,
                    borderWidth: 2,
                    borderColor: "auto",
                    padding: [2, 2, 0, 0],
                  },
                  a: {
                    color:'#fff',
                    fontSize:16
                  },
                  b:{
                      color:'#809ABE',
                      fontSize:10
                  },
                  c:{
                      fontSize:12,
                      padding:5
                  }
                },
                
              },
              labelLine:{
                  smooth:true
              },
              z:10,
              itemStyle:{
                  borderWidth:5,
                  borderColor:'#1B263E',
              },
              data: [
                { value: 12131, name: "A组"},
                { value: 39023, name: "B组"},
                { value: 39023, name: "C组" },
                { value: 39023, name: "D组" },
                { value: 39023, name: "E组" },
              ],
            
            }
          ]
        };
      },