利用百度echarts实现图表功能简单入门示例【附源码下载】


Posted in Javascript onJune 10, 2019

本文实例讲述了利用百度echarts实现图表功能。分享给大家供大家参考,具体如下:

百度有一款开源的图表控件,号称是大数据时代最好的图表控件。刚好目前的项目需要用图表展示给客户看数据,所以就选择这个三方的控件。对这种控件一般来说使用起来应该没有太大的难度,基本就是按照它的规则组装json数据,关键是配置上面, 如果刚开始入门,不太懂,可能真要花点时间来搞的。我整理了一个最基本的入门例子,里面有详细的注释,按这种方式去加载相关 js 就没有问题了:

<!DOCTYPE html>
<head>
  <meta charset="GBK">
  <title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height:400px"></div>
  <!-- 功能测试 -->
  <!-- ECharts单文件引入 -->
  <script src="./js/echarts.js"></script>
  <script type="text/javascript">
    // 路径配置
    require.config({
      paths: {
        echarts: './js'
      }
    });
    // 使用
    require(
      [
        'echarts',
        'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
      ],
      function (ec) {
        // 基于准备好的dom,初始化echarts图表
        var myChart = ec.init(document.getElementById('main')); 
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {      // 坐标轴指示器,坐标轴触发有效
              type : 'shadow'    // 默认为直线,可选为:'line' | 'shadow'
            }
          },
          legend: {
            data:['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
          },
          toolbox: {
            show : false,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'value'
            }
          ],
          yAxis : [
            {
              type : 'category',
              data : ['周一','周二','周三','周四','周五','周六','周日']
            }
          ],
          series : [
            {
              name:'直接访问',
              type:'bar',
              stack: '总量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[320, 302, 301, 334, 390, 330, 320]
            },
            {
              name:'邮件营销',
              type:'bar',
              stack: '总量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'联盟广告',
              type:'bar',
              stack: '总量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
              name:'视频广告',
              type:'bar',
              stack: '总量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[150, 212, 201, 154, 190, 330, 410]
            },
            {
              name:'搜索引擎',
              type:'bar',
              stack: '总量',
              itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
              data:[820, 832, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
         // 为echarts对象加载数据 
        myChart.setOption(option); 
        // 根据窗口自动缩放
        window.onresize = myChart.resize;
        // 绑定事件测试
        var ecConfig = require('echarts/config');
        myChart.on(ecConfig.EVENT.CLICK, function(param){
          // 需要的参数都可以从这里面获取.
          alert(param);
        })
      }
    );
  </script>
</body>

利用百度echarts实现图表功能简单入门示例【附源码下载】

整个例子代码下载,包含了百度 echarts包.

完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
Javascript 严格模式use strict详解
Sep 16 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JS实现页面数据懒加载
Feb 13 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 #Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 #Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 #Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 #Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
javascript+Canvas实现画板功能
2020/06/23 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
python 测试实现方法
2008/12/24 Python
python读取注册表中值的方法
2013/04/08 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
Python中的流程控制详解
2021/02/18 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
几个SQL的面试题
2014/03/08 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
优秀应届生求职信
2014/06/16 职场文书
房产授权委托书范本
2014/09/22 职场文书
《鲸》教学反思
2016/02/23 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python