echarts柱状图和饼图联动及共享数据集

零、前言

本人比较菜，代码运用不够熟练，甚至可能会出现错误，请大家指正和教导

后端提供的数据不太规范，因为一个接口要供图表和表格使用，只能自己做做处理。也许有其他办法，但是后端也不一定愿意改，现实开发限制颇多。

一、需求

二、思路

1.利用echarts官方提供的updateAxisPointer绑定事件实现饼图的数据动态展示

2.数据要使用数据集的形式

3.折线数据可单独设置，需要设置

        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value'
          }
        ],

4.饼图也设置在series中，重点是设置encode对应数据集名称

        {
            type: 'pie',
            id: 'pie',
            radius: '25%',
            center: ['50%', '85%'],
            animation: false,
            emphasis: {
              focus: 'self'
            },
            label: {
              position: 'inner',
              formatter: '{d}%'
            },
            encode: {
              itemName: 'type',
              value: null
            }
          }

三、代码

其中Charts为封装的组件，在此不贴代码了

this.$t()为国际化语法，在此只要理解是文本就可以

<Charts ref="barChart" height="10rem" :options="option1"></Charts>

绑定updateAxisPointer事件

bindChartEvent() {
      let barchart = this.$refs['barChart'].chart
      barchart.on('updateAxisPointer', event => {
        const xAxisInfo = event.axesInfo[0]
        // 判断是否移动到图表内
        if (xAxisInfo) {
          // dimension为x轴坐标值
          const dimension = xAxisInfo.value + 1
          // 显示图表
          barchart.setOption({
            title: {
              id: 'pie',
              show: true,
              text: `${this.source[0][dimension]}-胎次占比`,
              left: 'center',
              bottom: '30%'
            },
            series: {
              id: 'pie',
              radius: '25%',
              label: {
                show: true,
                // formatter: '{d}%'
                formatter: params => {
                  // console.log(params)
                  return params.percent.toFixed(1) + '%'
                }
              },
              encode: {
                value: dimension
              }
            }
          })
        } else {
          // 隐藏图表
          barchart.setOption({
            title: {
              id: 'pie',
              show: false,
              text: ``,
              left: 'center',
              bottom: '30%'
            },
            series: {
              id: 'pie',
              radius: '0%',
              label: { show: false }
            }
          })
        }
      })
    },

获取数据

fetchData() {
      let tempSource = [
        [
          'type',
          this.$t('statisticalAnalysis.breedCount'),
          this.$t('statisticalAnalysis.firstPregCount'),
          this.$t('statisticalAnalysis.firstNoCount'),
          this.$t('statisticalAnalysis.recheckPregCount'),
          this.$t('statisticalAnalysis.recheckNoCount'),
          this.$t('statisticalAnalysis.normalDryCount'),
          this.$t('statisticalAnalysis.abnormalDryCount'),
          this.$t('statisticalAnalysis.abortionCount'),
          this.$t('statisticalAnalysis.prematureCount'),
          this.$t('statisticalAnalysis.normalCount')
        ]
      ]
      getBreedingTrackingList().then(res => {
        this.currentTime = this.form.searchTime
        let [statisticDate, totalCount] = ['', []]
        let tableData = []
        res.data.forEach((item, index) => {
          statisticDate = item.statisticDate
          if (index < res.data.length - 1) {
            tempSource.push([
              tableColumn[index],
              item.breedCount,
              item.firstPregCount,
              item.firstNoCount,
              item.recheckPregCount,
              item.recheckNoCount,
              item.normalDryCount,
              item.abnormalDryCount,
              item.abortionCount,
              item.prematureCount,
              item.normalCount
            ])
          } else {
            totalCount.push(
              item.breedCountSum,
              item.firstPregCountSum,
              item.firstNoCountSum,
              item.recheckPregCountSum,
              item.recheckNoCountSum,
              item.normalDryCountSum,
              item.abnormalDryCountSum,
              item.abortionCountSum,
              item.prematureCountSum,
              item.normalCountSum
            )
          }
        })
        this.source = tempSource
        let obj = {
          statisticDate,
          tempSource,
          totalCount
        }
        this.option1 = this.getOption1(obj)
        this.bindChartEvent()
        this.$set(this.tableData1, 'tableData', tableData)
      })
    },

配置options

getOption1(resData) {
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            let [axisValueLabel, total] = ['', 0]
            axisValueLabel = params[0].axisValueLabel
            total = params[params.length - 1].value
            return `
              <div>
                <div>${axisValueLabel}</div>
                <div style='display: flex;
                            justify-content: space-between;
                            align-items:center'>
                  <span style="text-align: left;">
                    ${params[0].marker}${this.$t('statisticalAnalysis.totolCattleNumber')}
                  </span>
                  &emsp;<span>${total}</span>
                </div>
              </div>
            `
          }
        },
        legend: {
          bottom: '35%'
        },
        title: {
          text: `${this.currentBeginTime}-${this.currentEndTime}`,
          left: 'center'
        },
        toolbox: {
          right: '38%',
          itemSize: 18,
          top: -6,
          feature: {
            saveAsImage: {
              title: false,
              iconStyle: {
                borderColor: 'rgb(0, 0, 255)'
              }
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '40%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
          },
          data: [
            this.$t('statisticalAnalysis.breedCount'),
            this.$t('statisticalAnalysis.firstPregCount'),
            this.$t('statisticalAnalysis.firstNoCount'),
            this.$t('statisticalAnalysis.recheckPregCount'),
            this.$t('statisticalAnalysis.recheckNoCount'),
            this.$t('statisticalAnalysis.normalDryCount'),
            this.$t('statisticalAnalysis.abnormalDryCount'),
            this.$t('statisticalAnalysis.abortionCount'),
            this.$t('statisticalAnalysis.prematureCount'),
            this.$t('statisticalAnalysis.normalCount')
          ]
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        dataset: {
          source: this.source
        },
        series: [
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '30%',
            seriesLayoutBy: 'row',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'line',
            name: this.$t('statisticalAnalysis.count'),
            seriesLayoutBy: 'row',
            yAxisIndex: 1,
            data: resData.totalCount,
            lineStyle: {
              color: 'rgb(158,72,14)',
              width: 2
            }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '25%',
            center: ['50%', '85%'],
            animation: false,
            emphasis: {
              focus: 'self'
            },
            label: {
              position: 'inner',
              formatter: '{d}%'
            },
            encode: {
              itemName: 'type',
              value: null
            }
          }
        ]
      }
      return option
    }