echarts实现3个Y轴柱状图

在vue中使用echarts实现3个Y轴的柱状图效果图如下代码实现安装echartstemplate数据格式初始化左侧Y轴数值变为日期提示信息，如何展示百分比柱状图顶端展示百分比完整代码效果图如下有同学要说了，这不只有两个Y轴，接着往下看代码实现安装echartsnpm install echarts --save// 导入import echarts from 'echarts'template

_freely

6969人浏览 · 2020-05-19 23:47:38

_freely · 2020-05-19 23:47:38 发布

在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);
    }

欢迎提问，交流学习

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

_freely

@hbjiankely

已为社区贡献14条内容