echart横向柱状图生成排名,并且设置不同颜色

draw(){
let myChartDrawer = this.$echarts.init(document.getElementById(‘column’));
var colorList = [
["#E56E6E"],
["#FEB763"],
["#00C0DD"],
["#23C83E"],
["#1AA291"],
["#4186EC"],
["#1AEDF4"],
["#31D76B"],
["#FE7C2D"],
["#D7C046"]
];//定义每条柱状颜色
let option = {
title: {},
tooltip: {trigger: “axis”},
grid: {
x: 95, //左留白
y: 10, //上留白
x2: 35, //右留白
y2: 30 //下留白
},
calculable: true,
dataset: {
dimensions: [“goods_name”, “trade_num”],
source: [
{ goods_name: “东湖配变”, trade_num: 8 },
{ goods_name: “西河5/6”, trade_num: 8 },
{ goods_name: “lmn”, trade_num: 7 },
{ goods_name: “赵庄5/6”, trade_num: 6 },
{ goods_name: “甘肃”, trade_num: 6 },
{ goods_name: “台区6”, trade_num: 6 },
{ goods_name: “台区7”, trade_num: 6 },
{ goods_name: “台区8”, trade_num: 6 },
{ goods_name: “台区9”, trade_num: 6 },
{ goods_name: “台区10”, trade_num: 6 },

          ]
        },
        xAxis: [
          {
            splitLine: {
              show: false
            },
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              margin: 100,
              textStyle: {
                align: "left",
                color: "#00FFFF", 
                fontSize: 10 
              }
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.2)",
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: function(value, index) {
                  return colorList[index]
                },
                fontSize: 12 
              },
              formatter: function(value, index) {
                  return (index + 1) + " " + value;
                
              },
            }
          }
        ],
    series: [
      {
        type: "bar",
        barWidth:10,
         label: {
            normal: {
            position: 'right',
            show: true,
             color: function(params) {
              var _this = this;
              var index = params.dataIndex;
              return colorList[index]
            }
        }
    },
        itemStyle: {
          normal: {
            color: function(params) {
              var _this = this;
              var index = params.dataIndex;
              return colorList[index];//设置颜色`在这里插入代码片`
            }
          }
        },   
      }
    ]
              };
               myChartDrawer.setOption(option);                  
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值