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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现tab栏切换效果
Dec 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
PHP4之真OO
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
Python实现类继承实例
2014/07/04 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python定时器线程池原理详解
2020/02/26 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python3.7调试的实例方法
2020/07/21 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
退休感言
2014/01/28 职场文书
学生感冒英文请假条
2014/02/04 职场文书
消防安全汇报材料
2014/02/08 职场文书
护理学专业求职信
2014/06/29 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
禁毒主题班会教案
2015/08/14 职场文书
教师外出学习心得体会
2016/01/18 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
python程序的组织结构详解
2021/12/06 Python