【Echarts系列】多图例柱状图

序

为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。

示例

如图所示：

数据格式

chartData = {
      months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      regions: [
        { name: '宁乡市', color: '#5470C6', data: [3200, 2800, 3500, 3100, 2900, 3300, 3400, 3600, 3200, 3100, 3000, 2900] },
        { name: '望城区', color: '#91CC75', data: [2200, 2400, 2500, 2300, 2600, 2400, 2500, 2700, 2800, 2600, 2500, 2400] },
        { name: '浏阳市', color: '#EE6666', data: [1500, 1800, 1600, 1700, 1900, 2000, 2100, 1900, 1800, 1700, 1600, 1500] },
        { name: '长沙县', color: '#FAC858', data: [1200, 1400, 1300, 1500, 1400, 1600, 1500, 1700, 1600, 1500, 1400, 1300] }
      ]
    };

代码

Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。

<template>
  <div class="chart" ref="chartRef"></div>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
import echarts from 'echarts'

@Component
export default class MultiBarChart extends Vue {
  @Prop() data!: any
  @Ref() chartRef!: any
  private chart: any = {}

  @Watch('data')
  onDataChange() {
    this.createChart()
  }

  createChart() {
    this.chart = echarts.init(this.chartRef)

    const chartData = {
      months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      regions: [
        { name: '宁乡市', color: '#5470C6', data: [3200, 2800, 3500, 3100, 2900, 3300, 3400, 3600, 3200, 3100, 3000, 2900] },
        { name: '望城区', color: '#91CC75', data: [2200, 2400, 2500, 2300, 2600, 2400, 2500, 2700, 2800, 2600, 2500, 2400] },
        { name: '浏阳市', color: '#EE6666', data: [1500, 1800, 1600, 1700, 1900, 2000, 2100, 1900, 1800, 1700, 1600, 1500] },
        { name: '长沙县', color: '#FAC858', data: [1200, 1400, 1300, 1500, 1400, 1600, 1500, 1700, 1600, 1500, 1400, 1300] }
      ]
    };
    const option = {
      legend: {
        top: 0,
        left: '3%',
        itemWidth: 10,
        itemHeight: 10,
        data: chartData.regions.map(item => item.name),
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: any) => {
          let result = `${params[0].axisValue}<br/>`;
          params.forEach((item: any) => {
            result += `${item.marker} ${item.seriesName}: ${item.value} 吨<br/>`;
          });
          return result;
        }
      },
      grid: {
        top: '20%',
        left: 0,
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        axisLine: {
          show: true,     //是否显示X轴轴线
        },
        splitLine: {
          show: false	 //是否显示X轴方向上的分隔线
        },
        axisLabel: {     //设置X轴的坐标标签样式
          textStyle: {
            color: '#757790'
          }
        },
        axisTick: {
          show: true,
          alignWithLabel: true, //坐标刻度与标签对齐
          lineStyle: {          //设置X轴刻度样式
            width: 5,
            color: '#757790'
          }
        },
        data: chartData.months
      },
      yAxis: [{
        axisLabel: {          //不展示坐标标签为0的
          formatter: function(value: any) {
            if (Number(value) === 0) {
              return ''
            } else {
              return value
            }
          },
          textStyle: {
            padding: [0, 0, -25, 8],   //通过padding设置来实现坐标轴标签在轴线内
            color: '#757790',
            align: 'left'
          }
        },
        axisLine: {
          show: false				   //不展示Y轴轴线
        },
        splitLine: {
          show: true,
          lineStyle: {                 //以虚线形式来展示Y轴刻度方向上的分隔线
            color: '#E5E5E5'
          }
        },
        axisTick: {
          show: false                  //不显示Y轴刻度
        }
      },{
        type: 'value',
        name: '单位: 吨',
        axisLine: {
          show: false				   //不展示Y轴轴线
        },
        axisTick: {
          show: false                  //不显示Y轴刻度
        }
      }],
      series: chartData.regions.map(region => ({
        name: region.name,
        type: 'bar',
        barGap: '20%',
        barCategoryGap: '20%',
        barWidth: '10%',
        data: region.data,
        itemStyle: {
          color: region.color
        }
      }))
    }

    this.chart.setOption(option)
  }

  mounted() {
    this.createChart()
    window.addEventListener('resize', this.chartResize)
  }

  beforeDestroy() {
    if (this.chart) {
      window.removeEventListener('resize', this.chartResize)
      this.chart.dispose()
    }
  }

  chartResize() {
    if (this.chart) {
      this.chart.resize()
    }
  }
}
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>