echarts饼图绘制文字排版展示美化

最新推荐文章于 2023-09-17 00:25:55 发布

UpSeven0

最新推荐文章于 2023-09-17 00:25:55 发布

阅读量265

点赞数

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_34811855/article/details/128575741

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

chart1(dataY1, cahrtUnit) {
      if (!this.myChart1) {
        let chartDom = document.getElementById('chart1');
        this.myChart1 = echarts.init(chartDom);
      }
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '2%',
          top: '20%',
          width: 10,
          itemWidth: 12,
          itemHeight: 6,
          textStyle: {
            fontSize: 12,
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '45%',
            center: '60%',
            label: {
              formatter: (val) => {
                return `${val.name}\n${val.data.value} ${cahrtUnit} ${val.percent}%`
              },
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: { value: { fontSize: 10, color: '#aaaaaa' } }
            },
            labelLine: {
              length: 16,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.myChart1.getWidth() / 2;
              const points = params.labelLinePoints;
              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
              return params;
            },
            data: dataY1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.myChart1.setOption(option);
    },