1

Surpriseplus

2022-12-19 9c803f20cc05395bac2d3386accfe230210c07dc

 src/components/echart25.vue

@@ -10,64 +10,67 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "用户增量和总量占比",
          text: '用户增量和总量占比',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "40%",
            type: 'text',
            left: 'center',
            top: '40%',
            style: {
              fill: "#fff",
              text: "总用户量",
              fill: '#fff',
              text: '总用户量',
            },
          },
          {
            type: "text",
            left: "center",
            top: "50%",
            type: 'text',
            left: 'center',
            top: '50%',
            z: 10,
            style: {
              fill: "#fff",
              fill: '#fff',

              text: "400",
              font: "30px Microsoft YaHei",
              text: '400',
              font: '30px Microsoft YaHei',
            },
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          // containLabel: true,
        },
        series: [
          {
            name: "用户量",
            type: "pie",
            radius: ["40%", "70%"],
            name: '用户量',
            type: 'pie',
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                length: 15, // 指示线宽度
                lineStyle: {
                  color: "#fff", // 指示线颜色
                  color: '#fff', // 指示线颜色
                },
              },
            },
@@ -76,33 +79,33 @@
                // 各分区的提示内容
                // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                formatter: function (params) {
                  return params.name + "\n\n" + params.percent + "%";
                  return params.name + '\n\n' + params.percent + '%';
                },
                textStyle: {
                  // 提示文字的样式
                  color: "#fff",
                  color: '#fff',
                  fontSize: 14,
                },
              },
            },
            data: [
              { value: 280, name: "往年用户量" },
              { value: 120, name: "今年新增用户量" },
              { value: 280, name: '往年用户量' },
              { value: 120, name: '今年新增用户量' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart25"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart25'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },