XX排名Top5echarts 配置项内容和展示

      
      let myColor = ["#72cc66", "#fe4642", "#fea12e", "#027fff", "#EBEC2F"];
      let e = {
        蒲城县: 99,
        富平县: 98,
        潼关县: 94,
        韩城市: 88,
        临渭区: 81
      };
      let val = [];
      let legendName = [];
      let yval = [];
      let jj = [];
      let bf = [];
      for (let key in e) {
        legendName.unshift(key);
        val.unshift(e[key]);
      }

      val.forEach((el, idx) => {
        yval.push(idx);
        jj.push(Math.max.apply(null, val) - 0.55);
        bf.push(Math.max.apply(null, val));
      });
    option = {
        title: {
          text: "XX排名Top5",
          left: "5%",
          textStyle: {
            color: "#000",
            fontSize: 20,
            align: "center"
          }
        },
        grid: {
          left: "11%",
          right: "5%",
          top: "13%",
          bottom: -20,
          containLabel: true
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: "20",
            splitNumber: 8,
            axisLabel: {
              textStyle: {
                color: "#000",
                fontSize: "12"
              }
            },
            data: legendName
          },
          {
            axisTick: "none",
            axisLine: "none",
            splitNumber: 8,
            axisLabel: {
              show: false,
              textStyle: {
                color: "#1980ff",
                fontSize: "12"
              }
            },
            data: yval
          },
          {
            name: "",
            splitNumber: 8,
            nameTextStyle: {
              color: "#10ffff",
              fontSize: "16"
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0)"
              }
            },
            data: []
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: val,
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#000",
                  fontSize: "12"
                }
              }
            },
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            z: 2
          },
          {
            name: "内框",
            type: "bar",
            yAxisIndex: 1,
            data: jj,
            barWidth: "20%",
            itemStyle: {
              normal: {
                color: "#fff",
                barBorderRadius: 10
              }
            },
            z: 1
          },
          {
            name: "外框",
            type: "bar",
            yAxisIndex: 2,
            data: bf,
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
                barBorderRadius: 10
              }
            },
            z: 0
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0],
            yAxisIndex: 2,
            symbolSize: 18,
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
                opacity: 1
              }
            },
            z: 2
          }
        ]
      };