美文网首页
echarts-饼状图加背景图

echarts-饼状图加背景图

作者: _可儿 | 来源:发表于2024-03-04 10:41 被阅读0次
image.png
  • 代码块:
getChartOpt(data, total) {
      const bgImg = new URL(`../../../../assets/imgs/安全检查记录图表背景.svg`, import.meta.url)
        .href;
      const option = {
        title: {
          // 副标题
          subtext: '总检查数',
          // 主副标题间距
          itemGap: 10,
          text: total || 0,
          left: 'center',
          top: '45%',
          padding: [-40, 0],
          textStyle: {
            color: '#0591FC',
            fontSize: 56,
            fontFamily: 'DINAlternate-Bold',

            align: 'center',
          },
          // 副标题样式
          subtextStyle: {
            fontSize: 32,
            color: '#fff',
            fontFamily: 'PingFangSC-Regular',
          },
        },
        graphic: [
          {
            type: 'image', // 图形元素类型
            right: 'center', // 根据父元素进行定位 (居中)
            bottom: 'center', // 根据父元素进行定位   (0%), 如果bottom的值是 0,也可以删除该bottom属性值。
            z: 0, // 层叠
            bounding: 'all', // 决定此图形元素在定位时,对自身的包围盒计算方式
            style: {
              image: bgImg,
              width: 290,
              height: 290,
            },
          },
        ],
        series: [
          {
            name: '设备类型',
            type: 'pie',
            radius: ['75%', '85%'],
            color: this.colorList,
            label: {
              position: 'inner',
              show: false, //指示线文字
            },
            labelLine: {
              show: false, //知识线
              length: 20,
              length2: 20,
              lineStyle: {
                width: 2,
              },
            },
            itemStyle: {
              //设置间隙
              borderWidth: 6,
              borderColor: 'black',
            },
            data: data || [],
          },
        ],
      };
      return (this.chartOpt = option);
    }

相关文章

网友评论

      本文标题:echarts-饼状图加背景图

      本文链接:https://www.haomeiwen.com/subject/punlzdtx.html