如何用jQuery插件Echarts實現(xiàn)的漸變色柱狀圖

發(fā)布時間：2022-03-30 09:47:43 來源：億速云閱讀：309 作者：iii 欄目：移動開發(fā)

今天小編給大家分享一下如何用jQuery插件Echarts實現(xiàn)的漸變色柱狀圖的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts柱狀圖</title>  
</head>
<body>
  <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
  <div id="container" ></div>
  <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> 
  <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    option = null;    
    var xAxisData = [];
    var data = [];
    for (var i = 20; i < 29; i++) {
      xAxisData.push('2' +'/'+ i);
      data.push(Math.round(Math.random() * 500) + 200);
    }
    // 初始 option
    option = {
      title: {
        text: '每日成交額（萬元）'
      },
      tooltip: {
        trigger: 'axis',        
        borderColor: '#636F7F',
        borderWidth : 1,
        backgroundColor : 'rgba(99,111,127,1)',
        textStyle:{
          color : '#ffffff',
          // fontWeight : 'bold',
          fontSize : 14,  
        },
        transitionDuration : 0.6,        
        formatter: '{b0}<br />{c0}(萬元)',        
        axisPointer :{
          type : 'line',
          lineStyle : {
            color : '#05F41E',
            width : 1,
            type : 'solid',
          },
        },
        // axisPointer : {      // 坐標軸指示器，坐標軸觸發(fā)有效
        //   type : 'shadow',    // 默認為直線，可選為：'line' | 'shadow'
        //   shadowStyle :{
        //     color : '#D6EAFA',
        //     opacity : 0.5,
        //   }
        // },
      },
      calculable : true,
      xAxis: {
        data: xAxisData.map(function(x){
          return x;          
        }),
        axisLabel: {
          textStyle: {
            color: '#333',
            align : 'center',
            baseline : 'top'
          },
          rotate : 20,
          margin : 15,
        },
      }, 
      yAxis: {        
        // 橫向標線 默認為TRUE
        splitLine: {
          show: true,
        },
        axisLabel: {
          textStyle: {
            color: '#333'
          }
        },
        type : 'value',
        boundaryGap : false,
        // 分隔線線的類型
        splitLine: {
          show: true,
          lineStyle :{
            color : '#EFF0F0',
            type : 'dashed',
          }
        }
      },
      series: {
        type: 'bar',
        data: data,
        barWidth: 15,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#37BBF8'
            }, {
              offset: 1,
              color: '#2294E4'
            }]),
            // shadowColor: 'rgba(35,149,229,0.8)',
            // shadowBlur: 20,
            areaStyle: {type: 'default'}
          }
        }
      },      
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>
</html>

以上就是“如何用jQuery插件Echarts實現(xiàn)的漸變色柱狀圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

如何用jQuery插件Echarts實現(xiàn)的漸變色柱狀圖

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽