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>

 

posted @ 2019-03-19 11:43  静幻已空梦仍在  阅读(3145)  评论(0)    收藏  举报