echarts 實現柱狀圖漸變色

本文轉載自查看原文 2019-03-19 11:43 562 html 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts柱狀圖漸變色 Echarts柱狀圖實現不同顏色漸變色 echarts-----漸變色橫向柱狀圖 Echarts柱狀圖，柱子設置不一樣的漸變色 echarts餅圖設置漸變色 echarts-扇形圖-漸變色 echarts漸變色實現方法 echarts 設置柱狀,折線顏色為漸變色 echarts柱狀圖實現多條不同顏色漸變 vue echarts 柱狀圖變色顯示