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 相关文章推荐
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
天津市收音机工业发展史
2021/03/04 无线电
解析php中反射的应用
2013/06/18 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
JSON对象转化为字符串详解
2017/08/11 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python获得图片base64编码示例
2014/01/16 Python
记录Django开发心得
2014/07/16 Python
python3序列化与反序列化用法实例
2015/05/26 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python实现通讯录功能
2018/02/22 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python如何急速下载第三方库详解
2020/11/02 Python
python 实现图片批量压缩的示例
2020/12/18 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
刚毕业大学生自荐信范文
2014/02/20 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Flink 侧流输出源码示例解析
2022/09/23 Servers