echarts 横向TOP排名,可设置前三名配色

28 篇文章 5 订阅
        let myColor = ["#1089E7"];   //设定柱状图颜色
        let opt = { index: 0 };
        myChart.setOption({
          grid: {
            top: "1%",
            left: "10%",
            right: "15%",
            bottom: "1%",
            containLabel: true
          },
          xAxis: {
            show: false
          },
          yAxis: [
            {
              show: true,
              data: titlename,
              inverse: true,
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: "#fff",
                formatter: (value, index) => { //根据你的需求判断第几个是什么颜色
                  if (index < 3) {
                    return (
                      "{lgs|" +
                      (1 + index + opt.index) +
                      "} {title|" +
                      value +
                      "}"
                    );
                  } else {
                    return (
                      "{lg|" +
                      (1 + index + opt.index) +
                      "} {title|" +
                      value +
                      "}"
                    );
                  }
                },
                rich: {  // rich是文字属性自定义
                  lg: {
                    backgroundColor: "#8d7fec",
                    color: "#fff",
                    borderRadius: 10,
                    align: "center",
                    width: 20,
                    height: 15
                  },
                  lgs: {
                    backgroundColor: "#ff0000",
                    color: "#fff",
                    borderRadius: 10,
                    align: "center",
                    width: 20,
                    height: 15
                  },
                  title: {
                    color: "#fff",
                    width: 35,
                    align: "left"
                  }
                }
              }
            }
          ],
          series: [
            {
              name: "条",
              type: "bar",
              yAxisIndex: 0,
              data: data,  //外部定义,这里接收接口
              barWidth: 10,
              label: {
                normal: {
                  show: true,
                  position: "right",
                  textStyle: {
                    color: "#fff",
                    fontSize: "12"
                  },
                  formatter: function(data) {
                    return data.value + "次";
                  }
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 20,
                  color: function(params) {
                    var num = myColor.length;
                    return myColor[params.dataIndex % num];
                  }
                }
              }
            }
          ]
        });

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值