echarts 环图设置背景圈、label文字和线的样式处理、legend样式处理

UpSeven0

于 2023-11-23 11:29:32 发布

阅读量540

点赞数

文章标签： echarts 前端 javascript

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

版权

<template>
  <div class='screen3-left-2' :ref="refName" :class="refName"></div>
</template>
<script>
import * as echarts from 'echarts';
import $ from 'jquery';

export default {
  components: {},
  data() {
    return {
      myChart: null,
      chartData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      refName: 'screen3-left-2'
    }
  },
  watch: {
    chartData: {
      handler: function (val) {
        this.dealData(val);
      },
      deep: true
    },
  },
  mounted() {
    var chartDom = this.$refs[this.refName];
    this.myChart = echarts.init(chartDom);
    this.chartData && this.dealData(this.chartData);
    window.addEventListener("resize", () => {
      this.chartData && this.dealData(this.chartData);
      this.myChart.resize();
    });
  },
  computed: {
  },
  methods: {
    dealData(val) {
      const img = require('@/assets/knowyou/screen3-left-2.png');
      const hei = $('.screen3-left-2')[0].offsetHeight;
      if (val.length > 0) {
        let seriesData = [];
        for (let i = 0; i < val.length; i++) {
          seriesData.push({
            name: 'aaa' + i,
            value: val[i]
          });
        }
        this.initChart(seriesData, hei, img);
      } else {
        this.myChart.clear();
      }
    },
    initChart(seriesData = [], hei, img) {
      var option = {
        color: ['#49dff2', '#29bae9', '#079aee', '#2171d4', '#66a69b', '#95b6de', '#adf2cc', '#3a5ac3', '#b8d2c3', '#5c83ae', '#49dff2', '#29bae9', '#079aee', '#2171d4', '#66a69b', '#95b6de', '#adf2cc', '#3a5ac3', '#b8d2c3', '#5c83ae'],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 15, // 每一个item之间的间距
          width: '400',
          top: 'center',
          left: '62%',
          orient: 'vertical',
          formatter: (name, value) => {
            let dats = name.split('-');
            return `{name|${dats[0]}}\t\t\t{percent|${dats[1]}}`
          },
          textStyle: {
            color: '#fff',
            rich: {
              name: {
                fontSize: 12,
                color: '#7f99b7',
                padding: [0, 0, 0, 0],
                width: 40
              },
              percent: {
                fontSize: 14,
                fontWeight: 400,
                color: "white",
                padding: [0, 0, 0, 0],
              },
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['44%', '60%'],
            center: ['50%', '50%'],
            hoverAnimation: false, // 鼠标经过的动画 
            animation: false,
            selectedMode: false,
            silent: true, // 不响应和触发鼠标事件
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                label: { show: false },
                labelLine: { show: false },
                color: 'rgba(255,144,0,0.4)'
              }
            },
            data: [{
              value: 0,
              z: 1,
              label: {
                show: true,
                position: 'center',
                formatter: () => {
                  return `{bg|}`
                },
                rich: {
                  bg: {
                    left: 'center',
                    width: hei * 0.32,
                    height: hei * 0.32,
                    backgroundColor: {
                      image: img
                    }
                  }
                }
              }
            }],
          },
          {
            type: 'pie',
            radius: ['44%', '60%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              formatter: (val) => {
                return `{name|${val.name}}\n${val.percent}%`
              },
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 20,
              textStyle: {
                color: '#fff',
                rich: {
                  name: {
                    fontSize: 14,
                    color: '#12bedd',
                    padding: [0, 0, 0, 0],
                    width: 40
                  },
                }
              }
            },
            labelLine: {
              length: 25,
              length2: 20,
              maxSurfaceAngle: 80,
              lineStyle: {
                color: '#6590bf',
              }
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
              return params;
            },
            data: seriesData
          },
        ]
      };
      this.myChart && this.myChart.clear();
      option && this.myChart.setOption(option);
    },
  },
}
</script>
<style lang='scss' scoped>
.screen3-left-2 {
  width: 100%;
  height: 100%;
}
</style>