带有渐变色的柱状图

<template>
  <div ref="rangeMap" />
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'RangeMap',
  data() {
    return {
      mapData: {},
      myChart: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchart();
    })

  },
  methods: {
    initEchart() {
      let ydata = ['A市', 'B市', 'C市', 'D市', 'E市', 'F市'];
      let xdata = [12, 13, 14, 15, 16, 17];

      this.myChart = echarts.init(this.$refs.rangeMap)
      this.myChart.setOption({
        title: {
          text: '排行榜',
          left: 'center'
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "100",
          right: "20",
          bottom: "10",
          top: "20",
          containLabel: false,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: ydata,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 100,
            width: 120,
            align: "left",
            overflow: "truncate",
            formatter: function (value, index) {
              let ind = index + 1;
              if (ind == ydata.length) {
                return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
              } else if (ind + 1 == ydata.length) {
                return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
              } else if (ind + 2 == ydata.length) {
                return (
                  "{three|" + (ydata.length - index) + "} {c|" + value + "}"
                );
              }
              if (ydata.length - index > 9) {
                return (
                  "{five|" + (ydata.length - index) + "} {d|" + value + "}"
                );
              }
              return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
            },
            rich: {
              a: {
                color: "#59c9f9",
              },
              b: {
                color: "#59c9f9",
              },
              c: {
                color: "#59c9f9",
              },
              d: {
                color: "#59c9f9",
              },
              // 第一名
              one: {
                backgroundColor: "#E86452",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 第二名
              two: {
                backgroundColor: "#FF9845",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 第三名
              three: {
                backgroundColor: "#F6BD16",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 一位数
              four: {
                backgroundColor: "rgba(0,0,0,0.15)",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 两位数
              five: {
                backgroundColor: "rgba(0,0,0,0.15)",
                color: "white",
                width: 16,
                height: 16,
                padding: [1, 0, 0, 1],
                borderRadius: 10,
                fontSize: 11,
              },
            },
          },
        },
        series: [{
          type: "bar",
          showBackground: true,
          label: {
            show: true,
            position: "right",
            color: "rgba(0,0,0,0.5)",
          },
          barWidth: 16,
          itemStyle: {
            // color: "#1890FF",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#3977E6",
                },
                {
                  offset: 1,
                  color: "#1890FF",
                }
              ]
            },
            borderRadius: 10,
          },
          backgroundStyle: {
            color: "#F6F8FC",
            borderRadius: 10,
          },
          data: xdata,
        },]
      })
    }
  }
}
</script>

<style scoped lang="less"></style>