1

Surpriseplus

2022-12-19 9c803f20cc05395bac2d3386accfe230210c07dc

 src/components/echart36.vue

@@ -10,23 +10,26 @@
  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",
          trigger: 'item',
        },
        visualMap: {
          show: false,
@@ -38,49 +41,49 @@
        },
        series: [
          {
            name: "各项目人员分配",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            name: '各项目人员分配',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 80, name: "中俄东线管道工程南段" },
              { value: 70, name: "中俄东线管道工程中段" },
              { value: 15, name: "广州站" },
              { value: 30, name: "唐山LNG" },
              { value: 15, name: "新疆连木沁站场" },
              { value: 35, name: "中缅天然气管道风险排查航空摄影测量" },
              { value: 80, name: '中俄东线管道工程南段' },
              { value: 70, name: '中俄东线管道工程中段' },
              { value: 15, name: '广州站' },
              { value: 30, name: '唐山LNG' },
              { value: 15, name: '新疆连木沁站场' },
              { value: 35, name: '中缅天然气管道风险排查航空摄影测量' },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            roseType: 'radius',
            label: {
              color: "rgba(255, 255, 255, 0.8)",
              color: 'rgba(255, 255, 255, 0.8)',
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.8)",
                color: 'rgba(255, 255, 255, 0.8)',
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart36"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart36'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },