cpdm_manage/src/components/QSChart.vue

<template>
  <div class="pie-chart-content">
    <div :id="refCurrent" style="width: 100%; height: 70vh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    options: {
      type: Object,
      default: function () {
        return {};
      },
    },
    name: {
      type: String,
      default: "",
    },
    refCurrent: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("resize", this.echartsAllSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.echartsAllSize);
  },
  //当前监听到数据发生变化就开始渲染
  watch: {
    options() {
      this.myZhuEcharts(this.options);
    },
  },
  methods: {
    echartsAllSize() {
      let flag = false;
      setTimeout(() => {
        flag = true;
        if (flag) {
          //设置变化的大小
          console.log("大小变化了---------------------");
          let myChart = this.$echarts.init(document.getElementById(this.refCurrent));
          myChart.resize();
        }
      }, 1000);
    },
    myZhuEcharts(data) {
      //修改测试计划
      let myChart = this.$echarts.init(document.getElementById(this.refCurrent));
      // let myChart = this.$echarts.init(this.$refs.this.refCurrent);
      let option = {
        title: {
          text: "",
        },
        // tooltip: {
        //   trigger: "axis",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          // formatter: '{b} : {c} % '
          // formatter: function (params,trigger) {
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" +
                params[i].marker +
                params[i].seriesName +
                " : " +
                params[i].value +
                "%";
            }
            return relVal;
          },
          //   return '{a} <br/>{b} : {c} <br/>百分比 : {d}%'
          // },
        },
        legend: {
          data: ["焦虑", "抑郁", "压力", "视觉整合能力", "心理健康"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.nameList,
          axisLabel: {
            interval: 0,
            rotate: "-70",
            formatter: function (value) {
              return value.substring(0, 8) + "...";
            },
          },
          // axisLabel: {
          //   interval: 0,
          //   formatter: function (value) {
          //     return value.substring(0, 4) + "...";
          //   },
          // },
        },
        yAxis: {
          type: "value",
          name: "占比（%）",
        },
        series: data.scoreList,
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.pie-chart-content {
  width: 100%;
  /* height: 100%; */
}
</style>