Newer
Older
urbanLifeline_YanAn / src / views / oneMap / ConstructionEvaluation / ChartWssjcl.vue
@鲁yixuan 鲁yixuan on 15 Oct 3 KB updata
<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/util';
import { reactive, toRefs, onMounted, watch } from 'vue';
export default {
  name: 'zishuijianceForWarn',
  props: {
    data: Array,
  },
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
      alldatenumber: 0,
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };
    const init = () => {
      state.alldatenumber = 0;
      props.data.forEach(element => {
        state.alldatenumber += element.value;
      });
      let chartDom = echarts.init(document.getElementById(state.id));
      var option;
      option = {
        // backgroundColor: 'rgba(255,255,255,1)',
        // color: ['#8d7fec', '#5085f2', '#e75fc3', '#f87be2', '#f2719a', '#fca4bb', '#f59a8f'],
        legend: {
          orient: 'vartical',
          x: 'left',
          top: 'center',
          left: '60%',
          bottom: '0%',
          data: props.data.name,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 16,

          formatter: function (name) {
            var target, percent;
            for (var i = 0, l = props.data.length; i < l; i++) {
              if (props.data[i].name == name) {
                target = props.data[i].value;
                percent = props.data[i].percent;
              }
            }
            var arr = ['{a|' + name + '}{b|' + ' ' + percent + ' }'];
            return arr.join('\n');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                align: 'left',
                color: '#D1DEEE',
                fontFamily: 'PingFang-SC-Bold',
                padding: [0, 10, 0, 10],
              },
              b: {
                fontSize: 14,
                color: '#F9FEFF',
                align: 'center',
                fontFamily: 'SourceHanSansCN-Regular',
                padding: [0, 10, 0, 0],
              },
            },
          },
        },
        series: [
          {
            type: 'pie',
            clockwise: false, //饼图的扇区是否是顺时针排布
            // minAngle: 2, //最小的扇区角度(0 ~ 360)
            radius: ['50%', '70%'],
            center: ['30%', '50%'],

            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{text|{b}}\n{c}万吨/d',
                rich: {
                  text: {
                    color: '#F9FEFF',
                    fontSize: 16,
                    align: 'center',
                    verticalAlign: 'middle',
                    padding: 8,
                  },
                  value: {
                    color: 'rgb(0, 222, 255)',
                    fontSize: 24,
                    align: 'center',
                    verticalAlign: 'middle',
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            data: props.data,
          },
        ],
      };
      option && chartDom.setOption(option, true);
      chartDom.on('click', params => {
        console.log(params, '1111');
      });
      state.chart = chartDom;
    };
    watch(
      () => props.data,
      (newVal, oldVal) => {
        if (newVal) {
          init();
        }
      }
    );
    onMounted(() => {
      init();
      window.addEventListener('resize', resizeTheChart);
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      init,
    };
  },
};
</script>