利用百度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 相关文章推荐
javascript动态加载实现方法一
Aug 22 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
js实现右键菜单功能
Nov 28 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
vue 实现特定条件下绑定事件
Nov 09 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Git命令之分支详解
2021/03/02 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
python global和nonlocal用法解析
2020/02/03 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
机电系毕业生求职信
2014/07/11 职场文书
党员自我对照检查材料
2014/08/19 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年度保密工作总结
2015/04/24 职场文书
办公用品质量保证书
2015/05/11 职场文书
教师节老师寄语
2015/05/28 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电