e-charts柱状图，区间段不同颜色渲染显示

categories：Y轴，

data：X轴，value第一个参数对应categories里的索引值，一一映射

 

效果图： 

 代码：

<template>
  <div class="custom">
    <div class="status-view">
      <div class="item">
        <SvgIcon icon="icon_1"></SvgIcon>
        <div class="name">无线电设备：{
  { radiosNumber }}</div>
      </div>
      <div class="item">
        <SvgIcon icon="icon_2"></SvgIcon>
        <div class="name">用频设备：{
  { frequencyNumber }}</div>
      </div>
    </div>
    <div ref="custom" class="chart-view"></div>
    <div ref="customMain" class="main-view"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getStatistics, getFrequencyList } from "@api/home/index";

export default {
  name: "Custom",
  props: {
    venueName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      frequencyNumber: 0,
      radiosNumber: 0,
    };
  },
  watch: {
    venueName() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { data: list } = await getFrequencyList();
      const { data } = await getStatistics(this.venueName);
      this.radiosNumber = data.radiosNumber;
      this.frequencyNumber = data.frequencyNumber;
      const template = list.map(x => {
        return {
          name: x.nameFrequency,