echarts 实现柱状图渐变色

Posted quietxin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 实现柱状图渐变色相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2019</title>
</style>
</head>
<body>
<div id="main" style="width: 100%;height: 600px;"></div>

<script>

var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
var option = {
      xAxis: {
                type: ‘value‘,
                splitLine:{
            show:false
        },
        axisTick: {
          show: false,  
        },
        axisLine:{
            show: false,
            lineStyle:{
            color:‘transparent‘,
            }
        },
                boundaryGap: [0, 0.01],
      },
      yAxis: {
          type: ‘category‘,
          splitLine:{
            show:false
        },
        axisTick: {
          show: false,  
        },
          axisLabel:{
              margin:5,
              fontWeight: ‘bold‘,
              fontSize: 15,
          interval: 0,// 横轴信息全部显示
          rotate: 0 // 0度角倾斜显示
                },
                axisLine:{
                    show: false,
            lineStyle:{
              color:‘#FFFFFF‘,
            }
       },
                 data:[‘隔壁泰山‘,‘夜空中最亮的星夜空中最亮的星‘,‘串烧‘,‘说学逗唱‘,‘猴子说‘,‘创意走秀‘,‘兔耳朵舞‘,‘咖喱咖喱+我爱你‘]
      },
      series: [{
          name: ‘评论量(QTY)‘,
          type: ‘bar‘,
          data: [55,77,88,99,11,22,33,44],
          barWidth:30,
          itemStyle: {
            normal: {
                                barBorderRadius: [0, 5, 5, 0],
                            color: function (params){
                  var colorList = [
                      [‘#14c3a2‘,‘#14c3a2‘,‘#22e8c3‘,‘#22e8c3‘],
                      [‘#07b8d9‘,‘#62c4db‘,‘#86e9fc‘,‘#22e8c3‘],
                      [‘#0679e3‘,‘#3d97ed‘,‘#90c1fc‘,‘#22e8c3‘],
                      [‘#07b8d9‘,‘#62c4db‘,‘#86e9fc‘,‘#22e8c3‘],
                      [‘#0679e3‘,‘#3d97ed‘,‘#90c1fc‘,‘#22e8c3‘],
                      [‘#07b8d9‘,‘#62c4db‘,‘#86e9fc‘,‘#22e8c3‘],
                      [‘#0679e3‘,‘#3d97ed‘,‘#90c1fc‘,‘#22e8c3‘],
                      [‘#07b8d9‘,‘#62c4db‘,‘#86e9fc‘,‘#22e8c3‘]
                  ];
                  var index = params.dataIndex;
                  if(params.dataIndex >= colorList.length) {
                      index = params.dataIndex - colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(0,0,0,1, [
                      {offset: 0, color: colorList[index][0]},
                      {offset: 0.3, color: colorList[index][1]},
                      {offset: 0.6, color: colorList[index][2]},
                      {offset: 1, color: colorList[index][3]}
                  ]);
              },
                            label: {
                                show: true,
                                position: ‘insideLeft‘,
                                distance: 20,
                                textStyle: {
                                    color: ‘#ffffff‘,
                                    fontSize: ‘16‘
                                }
                            }
            },
                        
          },
      }]
    };
console.log(option.yAxis.data);
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

</script>
</body>
</html>

 

以上是关于echarts 实现柱状图渐变色的主要内容，如果未能解决你的问题，请参考以下文章

echarts 柱状图颜色渐变效果

echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色

echarts - 特殊需求实现代码汇总之柱图篇

柱状图点击切换数据

echarts柱状图修改背景线为网格线去掉刻度标签鼠标悬停在柱条上时变色柱条圆角弧度

echarts柱状图怎么修改柱体的颜色