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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
基于jquery实现五星好评
Nov 18 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python中sets模块的用法实例
2014/09/30 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python基于ID3思想的决策树
2018/01/03 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python实现疫情地图可视化
2021/02/05 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
骨干教师培训制度
2014/01/13 职场文书
农民致富事迹材料
2014/01/23 职场文书
户外活动总结
2015/02/04 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android