整体样式修改

ali

2024-09-03 0ae83a895e80a4b9777a27f613d721a7e5e2ac18

 energy_management_ui/src/views/electricityPrice/statistics/pieChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
        //required: true
      }
    },
@@ -31,70 +31,73 @@
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null
      }
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({legend,data} = {}) {
        this.chart.setOption({
          title: {
            text: '数据分析',
            left: 'left',
          text: "数据分析",
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#606266"
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            //bottom: 10,
            top:"30",
            orient: 'vertical',
            left: '10',
          orient: "vertical",
          left: "10",
            data: legend,
          textStyle: {
            color: "#fff"
          }
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
              data:data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        })
      },
      });
    }
  }
};
</script>