echarts 实现区县排行榜

v-resize全局指令链接

<template>
  <div class="chart" v-resize="resizeCharts" ref="piechart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      dataArr: [
        { name: "天府新区", value: 100 },
        { name: "高新区", value: 99 },
        { name: "龙泉驿区", value: 98.5 },
        { name: "锦江区", value: 95 },
        { name: "青羊区", value: 84 },
        { name: "金牛区", value: 57 },
        { name: "武侯区", value: 35 },
        { name: "成华区", value: 25 },
        { name: "青白江区", value: 20 },
        { name: "东部新区", value: 20 },
        { name: "新都区", value: 15 },
        { name: "温江区", value: 13 },
        { name: "双流区", value: 10 },
        { name: "郫都区", value: 8 },
        { name: "彭州市", value: 5 },
        { name: "简阳市", value: 4 },
        { name: "都江堰市", value: 0 },
      ],
    };
  },
  methods: {
    resizeCharts() {
      this.charts.resize();
    },
    initCharts() {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.piechart);
        this.charts.clear();
        this.setOption();
      });
    },
    setOption() {
      const option = this.getOption();
      this.charts.setOption(option, true);
    },
    getOption() {
      const dataAxis = this.dataArr.map((obj) => obj.name);
      const TData = this.dataArr.map((item) => Number(item.value));
      const max = Math.max(...TData);
      const maxArr = new Array(TData.length).fill(max);

      const option = {
        backgroundColor: "#080b30",
        title: {
          text: "区县占比排行榜",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20,
          },
          top: "3%",
          left: "center",
        },
        grid: {
          left: "15%",
          right: "15%",
          top: "10%",
          bottom: 25,
          // containLabel: true, //防止标签溢出
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            data: dataAxis,
            axisTick: {
              show: false,
            },
            inverse: true, // 反向坐标轴
            z: 10,
            axisLabel: {
              show: true,
              color: "#fff",
              fontSize: dataAxis.length > 10 ? 18 : 22,
              interval: 0,
              formatter: function (value) {
                const idx = dataAxis.indexOf(value);
                return "{label|" + value + "}" + "{sort" + (idx < 3 ? idx : "Default") + "|" + (idx + 1) + "}";
              },
              rich: {
                // 自定义富文本样式 {styleName|text content}
                // 第一行数据  "{label|" + '天府新区' + "}" + "{sort0" + "|" + (1) + "}"
                label: {
                  color: "#fff",
                  fontSize: dataAxis.length > 10 ? 18 : 22,
                  padding: [0, 10, 2, 0],
                  fontWeigth: "normal",
                },
                sort0: {
                  color: "#fff",
                  fontSize: 16,
                  width: 20,
                  height: 20,
                  textShadowColor: "rgba(0,0,0,.4)",
                  textShadowBlur: 2,
                  textShadowOffsetX: -1,
                  textShadowOffsetY: 1,
                  shadowColor: "rgba(255,102,31,.26)",
                  verticalAlign: "middle",
                  shadowBlur: 8,
                  shadowOffsetY: 4,
                  fontStyle: "italic",
                  align: "center",
                  backgroundColor: "#ff562e",
                },
                sort1: {
                  color: "#fff",
                  fontSize: 16,
                  width: 20,
                  height: 20,
                  textShadowColor: "rgba(0,0,0,.4)",
                  fontStyle: "italic",
                  textShadowBlur: 2,
                  textShadowOffsetX: -1,
                  textShadowOffsetY: 1,
                  shadowColor: "rgba(255,171,41,.26)",
                  verticalAlign: "middle",
                  shadowBlur: 8,
                  shadowOffsetY: 4,
                  align: "center",
                  backgroundColor: "#ff900e",
                },
                sort2: {
                  color: "#fff",
                  fontSize: 16,
                  width: 20,
                  height: 20,
                  fontStyle: "italic",
                  textShadowColor: "rgba(0,0,0,.4)",
                  textShadowBlur: 2,
                  textShadowOffsetX: -1,
                  textShadowOffsetY: 1,
                  shadowColor: "rgba(11,175,237,.26)",
                  verticalAlign: "middle",
                  shadowBlur: 8,
                  shadowOffsetY: 4,
                  align: "center",
                  backgroundColor: "#0599de",
                },
                sortDefault: {
                  color: "#fff",
                  fontSize: 16,
                  width: 17,
                  padding: [0, 3, 0, 0],
                  height: 20,
                  fontStyle: "italic",
                  textShadowColor: "rgba(0,0,0,.4)",
                  textShadowBlur: 2,
                  textShadowOffsetX: -1,
                  textShadowOffsetY: 1,
                  shadowColor: "rgba(15,191,129,.26)",
                  verticalAlign: "middle",
                  shadowBlur: 8,
                  shadowOffsetY: 4,
                  align: "center",
                  backgroundColor: "#0bbe63",
                },
              },
            },
          },
          {
            position: "left",
            offset: 3, //Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用
            axisLine: {
              lineStyle: {
                color: "#fc8452",
                width: 2,
              },
            },
          },
          {
            position: "left",
            offset: 6,
            axisLine: {
              lineStyle: {
                color: "#fc8452",
                width: 2,
              },
            },
          },
        ],
        tooltip: {
          formatter: function (params) {
            const colorList = ["#ff562e", "#ff900e", "#0599de", "#0bbe63"];
            const idx = params.dataIndex < 3 ? params.dataIndex : 3;
            const colorS = colorList[idx];
            const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${colorS}"></span>`;
            return `<div> ${marker} ${params.name}:  ${params.value}%</div>`;
          },
        },
        color: ["#ff562e", "#ff900e", "#0599de", "#0bbe63"],
        series: [
          {
            type: "bar",
            barGap: "-100%", //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'
            barWidth: 6,
            z: 0,
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: function (params) {
                  const idy = params.dataIndex > 3 ? 3 : params.dataIndex;
                  return "{color" + idy + "|" + TData[params.dataIndex] + "}{u" + idy + "|" + "%}";
                },
                rich: {
                  color0: {
                    color: "#ff562e",
                    fontSize: 24,
                    verticalAlign: "bottom",
                  },
                  color1: {
                    color: "#ff900e",
                    fontSize: 24,
                    verticalAlign: "bottom",
                  },
                  color2: {
                    color: "#0599de",
                    fontSize: 24,
                    verticalAlign: "bottom",
                  },
                  color3: {
                    color: "#0bbe63",
                    fontSize: 24,
                    verticalAlign: "bottom",
                  },
                  u0: {
                    fontSize: 14,
                    color: "#ff562e",
                    padding: 2,
                    verticalAlign: "bottom",
                  },
                  u1: {
                    color: "#ff900e",
                    fontSize: 14,
                    padding: 2,
                    verticalAlign: "bottom",
                  },
                  u2: {
                    color: "#0599de",
                    fontSize: 14,
                    padding: 2,
                    verticalAlign: "bottom",
                  },
                  u3: {
                    color: "#0bbe63",
                    fontSize: 14,
                    padding: 2,
                    verticalAlign: "bottom",
                  },
                },
              },
            },
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: "#e1e7eb",
              },
            },
            data: maxArr,
          },
          {
            type: "bar",
            barGap: "-100%",
            barWidth: 6,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            z: 8,
            itemStyle: {
              barBorderRadius: 5,
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 8,
              shadowOffsetY: 8,
              color: (params) => {
                //定义一个颜色集合
                const colorList = ["#ff7a0e", "#ffcb48", "#12c9fe", "#13c1a3"];
                const colorList2 = ["#ff562e", "#ff900e", "#0599de", "#0bbe63"];
                //对每个bar显示一种颜色
                const idx = params.dataIndex < 3 ? params.dataIndex : 3;
                const colorS = colorList[idx];
                const colorS2 = colorList2[idx];
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: colorS },
                  { offset: 1, color: colorS2 },
                ]);
              },
              // emphasis: {
              //   barBorderRadius: 5,
              //   color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              //     { offset: 1, color: "#00ff90" },
              //     { offset: 0, color: "#0084f3" },
              //   ]),
              // },
            },
            data: TData,
          },
        ],
      };
      return option;
    },
  },
  mounted() {
    this.initCharts();
  },
  beforeDestroy() {
    this.charts && this.charts.dispose();
    this.charts = null;
  },
  watch: {
    dataArr: {
      handler() {
        if (this.charts) {
          this.setOption();
        } else {
          this.initCharts();
        }
      },
    },
  },
};
</script>

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