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


Posted in jQuery onMarch 23, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jquery实现图片平滑滚动详解
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
You might like
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
Javascript实现的分页函数
2006/12/22 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
Dojo 学习要点
2010/09/03 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python多进程编程技术实例分析
2014/09/16 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python实现多进程通信实例分析
2019/09/01 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
党支部创先争优活动总结
2014/08/28 职场文书
工程合作意向书范本
2015/05/09 职场文书
python如何查找列表中元素的位置
2022/05/30 Python