parkBigScreen2/src/components/companySummary/business.vue

<template>
  <div class="business-container">
    <div class="chart" id="chart_left1"></div>
  </div>
</template>

<script>
let sum=0
export default {
  props: {
    chartData: {
      type: Object,
      required: true,
    },
  },
  name: "business",
  data() {
    return {
    }
  },
  mounted() {
    setTimeout(() => {
      // console.log(this.chartData)
      this.getEchartLeft1();
    }, 1000);
  },
  methods: {
    getEchartLeft1() {
      // 实例化对象
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById('chart_left1'));
      let charts = { // 按顺序排列从大到小
        cityList: ['临时车', '月卡车', '免费车', '绿牌车'],
        cityData: [this.chartData.temporaryCarNum || 0, this.chartData.yueZuCheNum || 0, this.chartData.freeCarNum || 0, this.chartData.greenCarNum || 0]
      }

      let top10CityList = charts.cityList;
      let top10CityData = charts.cityData;
      let color = ['rgba(255,255,156', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];

      let lineY = [];
      for (let i = 0; i < charts.cityList.length; i++) {
        let x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        let data = {
          name: charts.cityList[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              // eslint-disable-next-line no-undef
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[x] + ', 0.3)'
              }, {
                offset: 1,
                color: color[x] + ', 1)'
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }
      //这个方法很重要，是处理小圆圈的数据和位置的
      let arr = [];
      for (var i = 0; i < lineY.length; i++) {
        arr.push({
          value: lineY[i].value,
          symbolPosition: "end",
        });
      }
      // 指定配置和数据
      let option = {
        color: color,
        tooltip: {
          trigger: 'item',
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#fff',
              fontSize: 13
            },
          },
          data: top10CityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#fff',
              fontSize: 13
            },
            formatter: (val) => {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData.reverse()
        }],

        series: [
          {
            name: '',
            type: 'bar',
            zlevel: 2,
            barWidth: '7px',
            data: lineY,
            showBackground: true,
            animationDuration: 1500,
            label: {
              position: 'top',
              show: true,
              formatter: function (params) {
                sum+=parseInt(params.value) 
                // return params.data.realValue;
                var percent = Number((params.value / sum) * 100).toFixed(2) + '%';
                return percent?percent:0;
              },
              color: '#fff',
              fontSize: 12,
            },
          },
          {
            name: "XXX",
            type: "pictorialBar",
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0klEQVQokaWSsUoDQRRFT7bQbsFE82OxtbM1SWevkM8TiY2Vf2DILpJNpsix2NllZ1eDxAMXhjvvvscwD5WOrtWVulb3Ua/qU7xra7uhmbr1d4pYkwRn6vFEqOHYhFFvYre/UqjTDHgAciIBWFQwKWFc1udAQg4siY9vWVTKNtVjNZi6Hql74LJpNylhYzpiPILPPLFCxnmEDHjvOncXw6r7ofeB9ee2HNT5Tq+KWvNd7fVYoU7P+Y5/LUCjW7U8ESr9YeX6S/6mBvVLfVGf7S35N3HsEHSsKx9TAAAAAElFTkSuQmCC",
            symbolSize: [15, 15],
            symbolOffset: [5, 0],
            z: 3,
            itemStyle: {
              normal: {
                color: "#0A74FF",
              },
            },
            data: arr,
          },
        ]
      };

      // 把配置给实例对象
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.business-container {
  .chart {
    height: 3rem;
  }
}
</style>