echarts实现3个Y轴柱状图_echarts三个y轴-优快云博客

本文链接：https://blog.youkuaiyun.com/hbjiankely/article/details/106225468

本文详细介绍在Vue项目中利用ECharts实现包含三个Y轴的复杂柱状图，涵盖数据格式、代码实现、百分比展示及顶部百分比显示等关键步骤，适合初学者和进阶开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使用echarts实现3个Y轴的柱状图

效果图如下
代码实现

效果图如下

在这里插入图片描述
有同学要说了，这不只有两个Y轴，接着往下看

代码实现

安装echarts

npm install echarts --save
// 导入
import echarts from 'echarts'

template

<template>
  <div>
    <div id="barEcharts"></div>
  </div>
</template>

数据格式

tableData: [
        {
          reportTime: "2020-04-19~2020-04-25",
          compileTime: "2019-04-19~2019-04-25",
          carArea: "1区",
          fluxCount: 1604,
          comparseFlux: 1186,
          ratio: "0.8%"
        },
        {
          reportTime: "2020-04-19~2020-04-25",
          compileTime: "2019-04-19~2019-04-25",
          carArea: "2区",
          fluxCount: 1064,
          comparseFlux: 1286,
          ratio: "1.2%"
        },
        {
          reportTime: "2020-04-19~2020-04-25",
          compileTime: "2019-04-19~2019-04-25",
          carArea: "3区",
          fluxCount: 1060,
          comparseFlux: 1286,
          ratio: "-0.6%"
        },
        {
          reportTime: "2020-04-19~2020-04-25",
          compileTime: "2019-04-19~2019-04-25",
          carArea: "4区",
          fluxCount: 1604,
          comparseFlux: 1126,
          ratio: "0.2%"
        }
      ]

初始化

methods: {
    initChart() {
      let fluxList = [];
      let comparseFlux = [];
      let ratioList = [];
      this.tableData.forEach(item => {
        fluxList.push(item.fluxCount)
        comparseFlux.push(item.comparseFlux)
        ratioList.push({
          name: '增减率',
          value: Math.abs(item.fluxCount - item.comparseFlux),
          fluxCount: item.fluxCount,
          comparseFlux: item.comparseFlux
        })
      });
      const {fontSize} = this.itemStyle;
      let myecharts = echarts.init(document.querySelector('#barEcharts'));
      let option = {
          tooltip: {
            trigger: 'axis'
          },
          color: ['#FFFF00', '#02A7F0', '#D9001B'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            left: 'center',
            top: 30,
            formatter: function(name) {
              return name;
            }
          },
          title: {
            text: '厂区车流量对比分析',
            left: 'center'
          },
          xAxis: [
            {
              type: 'category',
              data: ['1区', '2区', '3区', '4区'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '查询日期',
              position: 'left'
            },
            {
              type: 'category',
              position: 'right',
              name: '对比日期',
              data: ['2019-04-19', '2019-04-25'],
            }
          ],
          series: [
            {
              name: '流量累计',
              type: 'bar',
              data: fluxList,
              itemStyle: {
                ...this.itemStyle
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: fontSize,
                  formatter: "{c}"
                }
              }
            },
            {
              name: '对比流量累计',
              type: 'bar',
              data: comparseFlux,
              itemStyle: {
                ...this.itemStyle
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: fontSize,
                  formatter: "{c}"
                }
              }
            },
            {
              name: '增减率',
              type: 'bar',
              data: ratioList,
              itemStyle: {
                ...this.itemStyle
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: fontSize,
                  formatter: "{c}"
                }
              }
            }
          ]
      };
      myecharts.setOption(option);
    }
  },
  mounted() {
    this.initChart()
  }

效果图如下
在这里插入图片描述

左侧Y轴数值变为日期

// 定义三个Y轴，隐藏一个，type类型为Value
// 第二个、第三个type类型为category
yAxis: [
            {
              type: 'value',
              name: '查询日期',
              position: 'left',
              show: false   // 第一个Y轴隐藏
            },
            {
              type: 'category',
              position: 'left', // 定位到左侧
              name: '查询日期',
              data: ['2020-04-19', '2020-04-25']
            },
            {
              type: 'category',
              position: 'right', // 定位到右侧
              name: '对比日期',
              data: ['2019-04-19', '2019-04-25'],
            }
          ]

提示信息，如何展示百分比

// 实现思路
// 1. 实际展示的是差值,差值有可能是负数，需要用Math.abs()
// 2. 利用formatter函数，重写提示信息，计算百分比
tooltip: {
   trigger: 'axis',
   formatter: params => {
     return `${params[0].axisValueLabel}<br />
             ${params[0].seriesName}: ${params[0].data}<br />
             ${params[1].seriesName}: ${params[1].data}<br />
             ${params[2].seriesName}: ${(params[0].data/params[1].data - 1).toFixed(2)}%`
            }
          },

效果图如下，格式化之后的提示信息
在这里插入图片描述

柱状图顶端展示百分比

{
   name: '增减率',
   type: 'bar',
   data: ratioList,
   itemStyle: {
     ...this.itemStyle
   },
   label: {
     normal: {
       show: true,
       position: 'top',
       color: '#000000',
       fontWeight: 'bold',
       fontSize: fontSize,
       formatter: params => {
         return `${(params.data.fluxCount/params.data.comparseFlux - 1).toFixed(2)}%`
       }
     }
   }
 }

完整代码

initChart() {
      let fluxList = [];
      let comparseFlux = [];
      let ratioList = [];
      this.tableData.forEach(item => {
        fluxList.push(item.fluxCount)
        comparseFlux.push(item.comparseFlux)
        ratioList.push({
          name: '增减率',
          value: Math.abs(item.fluxCount - item.comparseFlux),
          fluxCount: item.fluxCount,
          comparseFlux: item.comparseFlux
        })
      });
      const {fontSize} = this.itemStyle;
      let myecharts = echarts.init(document.querySelector('#barEcharts'));
      let option = {
          tooltip: {
            trigger: 'axis',
            formatter: params => {
              return `${params[0].axisValueLabel}<br />
                      ${params[0].seriesName}: ${params[0].data}<br />
                      ${params[1].seriesName}: ${params[1].data}<br />
                      ${params[2].seriesName}: ${(params[0].data/params[1].data - 1).toFixed(2)}%`
            }
          },
          color: ['#FFFF00', '#02A7F0', '#D9001B'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            left: 'center',
            top: 30,
            formatter: function(name) {
              return name;
            }
          },
          title: {
            text: '厂区车流量对比分析',
            left: 'center'
          },
          xAxis: [
            {
              type: 'category',
              data: ['T1停车场', 'T2停车场', 'T3停车场', 'T4停车场'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '查询日期',
              position: 'left',
              show: false
            },
            {
              type: 'category',
              position: 'left',
              name: '查询日期',
              data: ['2020-04-19', '2020-04-25']
            },
            {
              type: 'category',
              position: 'right',
              name: '对比日期',
              data: ['2019-04-19', '2019-04-25'],
            }
          ],
          series: [
            {
              name: '流量累计',
              type: 'bar',
              data: fluxList,
              itemStyle: {
                ...this.itemStyle
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: fontSize,
                  formatter: "{c}"
                }
              }
            },
            {
              name: '对比流量累计',
              type: 'bar',
              data: comparseFlux,
              itemStyle: {
                ...this.itemStyle
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: fontSize,
                  formatter: "{c}"
                }
              }
            },
            {
              name: '增减率',
              type: 'bar',
              data: ratioList,
              itemStyle: {
                ...this.itemStyle
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: fontSize,
                  formatter: params => {
                    return `${(params.data.fluxCount/params.data.comparseFlux - 1).toFixed(2)}%`
                  }
                }
              }
            }
          ]
      };
      myecharts.setOption(option);
    }