echarts #多grid情況下，根據數據劃分空間 #grid left right值自動計算

其實很簡單，簡單畫一畫就清楚了,大致的關係如下圖示：

// 實例數據
dataSource: [
    {
        name: '一組',
        currencySymbol: '￥',
        value: [
            {
                name: '趙強',
                value: 99999,
            },
            {
                name: '劉波',
                value: 88888,
            },
            {
                name: '周亮',
                value: 77777,
            },
        ],
    },
    {
        name: '二組',
        currencySymbol: '￥',
        value: [
            {
                name: '方齊',
                value: 6666,
            },
            {
                name: '鄭強',
                value: 555,
            },
        ],
    },
    {
        name: '三組',
        currencySymbol: '￥',
        value: [
            {
                name: '懿軒',
                value: 10810.74,
            },
            {
                name: '哲瀚',
                value: 10603.07,
            },
            {
                name: '昊焱',
                value: 10169.32,
            },
            {
                name: '天宇',
                value: 1022.98,
            },
            {
                name: '雪松',
                value: 10207.0,
            },
            {
                name: '靖琪',
                value: 10163.52,
            },
        ],
    },
],

grid: this.dataSource.map((it, index) => {
    // console.log((100 / this.dataSource.length) * index + '%', '--line91')
    let gap = 5 //間距
    let length = this.dataSource.length // 數組長度
    let width = (100 - gap * length - gap) / length // 每個grid的寬度,減去的gap 是最後一個grid的right值

    let res = {
        id: it.name,
        left: (index + 1) * gap + index * width + '%',
        right: 100 - (index + 1) * (gap + width) + '%',
    }
    console.log(res, '--line108')
    return res
}),

完整組件代碼

<template>
<div />
</template>

<script>
// import resize from "@/views/dashboard/mixins/resize";

export default {
// mixins: [resize],
props: {
 dataSource: {
   type: Array,
   default: () => [],
 },
},
data() {
 return {
   chart: null,
 }
},
computed: {
},
watch: {
 // 監聽數據變化，觸發圖表繪製刷新
 dataSource: {
   handler(val) {
     this.drawChart()
   },
 },
},
mounted() {
 this.chart = this.$echarts.init(this.$el, 'macarons')
 this.drawChart()
},
beforeDestroy() {
 if (!this.chart) {
   return
 }
 this.chart.dispose()
 this.chart = null
},
methods: {
 drawChart() {
   let _this = this
   let grid = []
   let yAxis = []
   let xAxis = []
   let series = []

   _this.dataSource.forEach((it, index) => {
     function stucGrid() {
       // 構建grid數據
       let gap = 5 //間距
       let length = _this.dataSource.length // 數組長度
       let width = (100 - gap * length - gap) / length // 每個grid的寬度,減去的gap 是最後一個grid的right值
       grid.push({
         id: it.name,
         top: 0,
         bottom: '10%',
         left: (index + 1) * gap + index * width + '%',
         right: 100 - (index + 1) * (gap + width) + '%',
       })
     }
     function strucyAxis() {
       let temp = Object.assign(
         {
           gridIndex: index,
         },
         new Object({
           show: true,
           type: 'category',
           nameTextStyle: {
             fontSize: 14,
             fontFamily: 'Microsoft YaHei',
             align: 'right',
             color: '#000',
           },
           offset: 10,
           axisTick: {
             show: false,
           },
           axisLine: {
             show: true,
             lineStyle: {
               color: '#d8d8d8',
             },
           },
           axisLabel: {
             fontSize: 10,
             color: '#000',
           },
           splitLine: {
             show: false,
             lineStyle: {
               color: '#d8d8d8',
               width: 1,
               type: 'dashed',
             },
           },
           data: it.value.map((_it) => _it.name),
         })
       )
       yAxis.push(temp)
     }
     function strucxAxis() {
       let temp = Object.assign(
         {
           gridIndex: index,
         },
         new Object({
           name: '＄',
           type: 'value',
           inverse: false,
           boundaryGap: true,
           axisLine: {
             show: true,
             lineStyle: {
               color: '#d8d8d8',
             },
           },
           axisTick: {
             show: true,
             alignWithLabel: true,
           },
           axisLabel: {
             color: 'rgba(0, 0, 0, 0.85)',
             fontSize: 10,
             interval: 0, // 標籤細粒度
             rotate: 20,
             align: 'center',
             margin: 20, //標籤與軸線的距離
             // verticalAlign: 'bottom',
           },
           splitLine: {
             show: true,
             lineStyle: {
               color: '#d8d8d8',
               width: 1,
               type: 'dashed',
             },
           },
           splitArea: {
             show: false,
           },
         })
       )
       xAxis.push(temp)
     }
     function strucSeries() {
       let temp = {
         name: '銷售額', // lengend need this
         type: 'bar',
         smooth: true,
         showSymbol: true,
         symbol: 'diamond',
         symbolSize: 8,
         // barGap: '-100%',
         xAxisIndex: index,
         yAxisIndex: index,
         data: it.value.map((_it) => _it.value),
         label: {
           show: false,
           position: 'insideRight',
           color: '#fff',
         },
         barWidth: 8,
         itemStyle: {
           barBorderRadius: 20,
           color: new _this.$echarts.graphic.LinearGradient(
             0,
             0,
             0,
             1,
             [
               {
                 offset: 0,
                 color: '#4383FF',
               },
               {
                 offset: 1,
                 opacity: 0.5,
                 color: '#4E54FF',
               },
             ],
             false
           ),
         },
       }
       series.push(temp)
     }
     stucGrid()
     strucyAxis()
     strucxAxis()
     strucSeries()
   })
   this.chart.setOption({
     title: {
       show: false,
     },
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'rgba(255, 255, 255, 0.7)',
       axisPointer: {
         type: 'shadow',
       },
       // formatter:''
     },
     legend: {
       show: false,
     },
     grid,
     yAxis,
     xAxis,
     series,
   })
   // _this.resize() //首次繪製 resize
   // 窗口縮放resize
   // window.addEventListener("resize", _this.resize()); //這個不加也可以，但是加了在resize的時候更加流暢
 },

 // resize() {
 //   this.chart.resize({
 //     width: 'auto', //自動獲取dom寬度
 //     height: (() => {
 //       return 'auto'
 //     })(),
 //   })
 // },
},
}
</script>
<style scoped>
.tooltip-wrapper {
background-color: aqua;
}
</style>