首页 > 其他分享 >echarts中设置横向柱状图及其每个柱子设置不同颜色

echarts中设置横向柱状图及其每个柱子设置不同颜色

时间:2022-12-23 10:12:08浏览次数:46  
标签:柱子 颜色 color 柱状图 设置 var echarts 255

var colors =["#73C0DE","#EE6666","#FAC858","#91CC75"];
var dataVal = [120, 200, 150, 80]
var option = {
  xAxis: {
    type: 'value', // 设置X轴为值轴
    splitLine: {
      show: false  // 设置X轴方向的辅助线是否显示
    },
  },
  yAxis: {
    type: 'category', // 设置Y轴为名称轴
    axisLabel: {
      color: "rgba(255, 255, 255, 1)", // Y轴字体颜色
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu'],// Y轴名称
  },
  series: [
    {
      type: "bar", // 图表类型
      // 柱上面的数值配置
      label: {
        show: true, // 显示值
        position: "right", // 显示位置
        color: "white",
      },
      
      barWidth:"40%", // 设置柱子的宽度
      // 每一个条目的样式配置
      itemStyle: {
        // color: "#EE6666" // 这是设置所有柱子为同一个颜色
        // 柱子的颜色设置不同颜色
        color: function(p){
          return colors[p.dataIndex]
        }
      },
      data:dataVal
    },
    
  ]
}

 

标签:柱子,颜色,color,柱状图,设置,var,echarts,255
From: https://www.cnblogs.com/anna001/p/17000103.html

相关文章