echarts top5监控图

用echarts 中的 bar 柱状图改的top5监控

代码：(数据是我自己排序传入data的，这块代码只是像展示样式 )

    const names = ["name1","name2", "name3","name4","name5"]
    const values = [98, 76.77, 55.5, 44, 33, 22]
    const myColor = ['#1089E7', '#FF8E4D', '#56D0E3', '#1089E7', '#F57474']
      const option = {
        // 图标位置
        grid: {
          top: '10%',
          left: '25%',
          right: '15%',
          bottom: '1%'
        },
        tooltip: {
          show: true,
          backgroundColor: '#fff',
          textStyle: {
            fontSize: 12,
            color: '#152934',
            lineHeight: 24
          },
          formatter: function (params) {
            return `${params.name} : ${params.data} %`
          }
        },
        xAxis: {
          show: false
        },
        yAxis: [{
          show: true,
          data: names,
          inverse: true,
          axisLine: 'none',
          splitLine: {
            show: false
          },
          axisTick:'none',
          axisLabel: {
            color: '#fff',
            formatter: (value, index) => {
              if (value.length > 10) {   //因为名字过长显示的问题，所以做了截取
                return [`{title|${value.slice(0, 7)}...}`].join('')
              } else {
                // [`{lg|${index + 1}}` + `{title|${value}}`]
                return [`{title|${value}}`].join('')
              }
            },
            rich: {
              lg: {
                color: '#ff7e00',
                borderRadius: 15,
                align: 'left',
                width: 8,
                height: 15
              },
              title: {
                color: '#fff',
                width: 50,
                align: 'left',
                borderRadius: 5,
                padding: 5
              }
            }
          }
        }],
        series: [{
          type: 'bar',
          yAxisIndex: 0,
          data: values,
          barWidth: 6,
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: '12'
              },
              formatter: function (value) {
                return value.value + '%'
              }
            }
          },
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: function (params) {
                var num = myColor.length
                return myColor[params.dataIndex % num]
              }
            }
          }
        }]
      }
      this.chart.setOption(option)