欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery插件Echarts实现的渐变色柱状图

程序员文章站 2022-06-02 11:18:01
效果图： 代码如下：

效果图：

jQuery插件Echarts实现的渐变色柱状图

代码如下：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>echarts柱状图</title>  
</head>
<body>
  <!-- 为echarts准备一个具备大小（宽高）的dom -->
  <div id="container" style="width: 600px;height:400px; margin: 100px auto 20px;"></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 : {      // 坐标轴指示器，坐标轴触发有效
        //   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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

上一篇： 中国乐团十大音乐才子：林俊杰上榜，他是亚洲天王

下一篇： 华语乐坛教父三座大山 乐坛中传奇一般的存在，你认识几位

推荐阅读