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);                  
}

你可能感兴趣的:(echarts,排名,javascript,vue.js)