利用百度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 相关文章推荐
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
a标签调用js的方法总结
Sep 05 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
详解Vue串联过滤器的使用场景
Apr 30 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 手机归属地查询 api
2010/02/08 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
python更新列表的方法
2015/07/28 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python学生管理系统代码实现
2020/04/05 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python爬虫之遍历单个域名
2019/11/20 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python实现把类当做字典来访问
2019/12/16 Python
python自动下载图片的方法示例
2020/03/25 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
残疾人创业典型事迹
2014/02/01 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python