ECharts柱状排名图柱子上方显示文字与图标代码实例

initChart() {
  let that = this;
  const fontColor = '#00D8FE'
  this.chart = this.$echarts.init(this.$refs.chart);//this.chart是data() {return {chart: null}}中创建的属性
  var option = {
    grid: {
      //柱状图位置
      top: "18%",
      left: "5%",
      right: "4%",
      bottom: "5%",
      containLabel: true,
    },
    // 柱图的标题文字
    //   title: {
    //     text: '平均游览时长：' + this.averageTime + '小时',
    //     textStyle: {
    //         align: 'left',
    //         color: '#18F6FF',
    //         fontSize: that.$base.nowSize(14),
    //     },
    //     top: '5%',
    //     left: '15%',
    // },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: "#65A3FF",
          opacity: 0.2,
          width: "auto",
        },
      },
      textStyle: {
        color: "#FFFFFF",
        fontFamily: "MicrosoftYaHei",
        fontSize: that.$base.nowSize(14),
      },
      borderWidth: 0,
      borderRadius: 5,
      padding: 0,
      backgroundColor: "transparent",
      formatter: function (v) {
        var str =
          '<span>' +
          v[0].name +
          "：" +
          v[0].data +
          "人</span><br/>";
       var inner =
          '<div style="color: #fff;text-align: left;font-family:Microsoft YaHei;line-height:' +
          that.$base.nowSize(22) +
          "px;font-size:" +
          that.$base.nowSize(14) +
          "px;padding: " +
          that.$base.nowSize(5) +
          "px " +
          that.$base.nowSize(10) +
          'px; border-radius:' +
          that.$base.nowSize(8) +
          'px; background: linear-gradient(90deg, #286CE9 0%, #6004F4 100%);">' +
          str +
          "</div>";
        return inner;
      },
    },
      xAxis: [
        {
          type: "category",
          data: ['光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区'],
          axisLine: {
            //x轴样式
            show: false
          },
          axisTick: {
            //轴线刻度
            show: false
          },
          shadowBlur: 10,
          axisLabel: {
            show: true,
            interval: 0,//使x轴文字显示全
            textStyle: {
              color: "#FFFFFF",
              fontSize: that.$base.nowSize(12),
            },
            inside: false,
            
            // rotate: 20,
          },
          splitLine: {
            show: false
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "",
          nameLocation: "end",
          nameTextStyle: {
            fontFamily: "Source Han Sans CN",
            color: "#26BCF8",
            opacity: 0.7,
          },
          axisLine: {
            //y轴样式
            show: false
          },
          axisLabel: {
            show: false,
            inside: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
        },
      ],
      series: [
        {
          //柱的信息
          name: "体育健康",
          type: "bar",
          data: [200, 170, 167, 150, 146, 132, 120, 115, 100, 80],
          itemStyle: {
            normal: {
                barBorderRadius: 0,
                color: function (params) {
                    //渐变色，也可以直接用数组给不同的柱子设置不同的颜色
                    return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                        offset: 0,
                        color: "rgba(103, 245, 200, 1)",
                        },
                        {
                        offset: 1,
                        color: "rgba(89, 252, 198, 0)",
                        },
                    ]);
                },  
            }
          },
          emphasis: {
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#F9E142' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#40523F' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
            }
          },
          // 只能展示数据中的value字段
          label: {
            show: false,
            position: 'top',
            color: fontColor,
            fontSize: that.$base.nowSize(14)
          },
          zlevel: 11,
          barWidth: that.$base.nowSize(10), //柱子宽度
          markPoint: {
            symbol:'rect',// circle:圆形，rect:方形
            itemStyle:{
              normal:{
                label:{
                  show:true,
                  color:'#fff',
                  position: 'top',
                  color: fontColor,
                  fontSize: that.$base.nowSize(14),
                  formatter: function (param) {
                    // if(param.data.coord[1]>20){
                    //   return '优秀'
                    // }else if (param.data.coord[1]>10){
                    //   return '良好'
                    // } else {
                    //   return '不达标'
                    // }
                    return param.name
                  }
                },
                color:'rgba(89, 252, 198, 0)'
              }
            },
            symbolSize:[50, 50],
            symbolOffset:[0,24],
            // data中的数据，name字段是你想要展示的内容，coord字段中的第一个数是指第几个柱子，第二个字段是柱子的值
            data:[
              {name:'Top1',coord:[0,200]},
              {name:'Top2',coord:[1,170]},
              {name:'Top3',coord:[2,167]},
              {name:'Top4',coord:[3,150]},
              {name:'Top5',coord:[4,146]},
              {name:'Top6',coord:[5,132]},
              {name:'Top7',coord:[6,120]},
              {name:'Top8',coord:[7,115]},
              {name:'Top9',coord:[8,100]},
              {name:'Top10',coord:[9,80]},
            ],
          },
        //   markLine: {
        //     data: [
        //       {type: 'average', name: '平均值'}
        //     ]
        //   }
        },
      ],
    };
    option && this.chart.setOption(option);
 },
// tooltip 自动循环展示
setHighlightFun() {
    this.chart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: this.loopIndex,
      position: (pos, params, dom, rect, size) => {
        this.$utils.positionFun(pos, params, dom, rect, size)
      },
    });
    this.loopIndex++;
    // this.resData 是data() {return {resData: []}}中创建的属性,内容是对应的柱图的数据条数的数据
    if (this.loopIndex == this.resData.length) {
      this.loopIndex = 0;
    }
},