ljclw-ui/src/views/vehicle/components/VehicleCarAllocation.vue

<template>
  <div ref="chart" class="item" style="height: 330px; width: 224px" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chart: null,
      timer: '',
      dataList: [],
    }
  },
  props: {
    allocationList: {
      type: Array,
      default: [],
    },
  },
  // watch: {
  //   allocationList: {
  //     handler(val) {
  //       this.$nextTick(() => {
  //         const chartDom = this.$refs.chart
  //         // 初始化图表实例
  //         this.chart = echarts.init(chartDom)
  //         this.initChart(val)
  //       })
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },

  methods: {
    initChart() {
      const option = {
        color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016'], // 设置柱状图的颜色
        // textStyle: {
        //   color: '#fff',
        //   fontSize: 16,
        // },

        tooltip: {
          formatter: function (params) {
            // console.log(11111111);
            // console.log('--------连', params)
            return params[0].name  + ' : ' + params[1].data
          },
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
        
        },
        grid: {
          left: '-24%',
          right: '4%',
          bottom: '0%',
          top: '5%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          // 设置x轴显示几段
          // min: 0,
          max: () => Math.max(...this.allocationList.map(item =>  item.value)),
          interval: 0,
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: 'transparent',
            },
          },
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            verticalAlign: 'top',
            align: 'left',
            padding: [-25, 0, 40, 6],
            textStyle: {
              fontSize: 14,
              color: '#1089E7',
              // fontFamily: 'Source Han Sans CN',
            },
          },
          data: this.allocationList.map((item) => {
              return item.name
            }),
          axisTick: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#e0e0e0',
            },
          },
          inside: true,
          //   textStyle: {
          //     color: '#000',
          //   },
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: '#739FA8', // 定义柱形的背景色
              borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
            },
            barGap: '-100%', //设置柱形重合的重要步骤
            data:this.allocationList.map((item) => {
              return item.total
            }),
            animation: false, // 关闭动画效果
            barWidth: '18px', // 设置柱形宽度
          },
          {
            type: 'bar',
            data: this.allocationList.map((item) => {
              return item.value
            }),
            barWidth: '15px',
            barGap: '-90%', //设置柱形重合的重要步骤
            itemStyle: {
              borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
              color: function (params) {
                var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016','#33FA8F']
                return colorList[params.dataIndex]
              },
            },
          },
        ],
      }
      this.chart.setOption(option)
      //自适应图表
      window.onresize = this.chart.resize
    },
  },
  mounted() {
    const chartDom = this.$refs.chart
    // console.log('------', chartDom)
    //   // 初始化图表实例
    this.chart = echarts.init(chartDom)
    this.initChart()
  },
}
</script>

<style scoped lang="less"></style>