利用百度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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JS 表单验证大全
Nov 23 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
BootStrap selectpicker
Jun 20 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
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 文件上传实例代码
2012/04/19 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
关于php开启错误提示的总结
2019/09/24 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
vue组件实例解析
2017/01/10 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Node.js编写CLI的实例详解
2017/05/17 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python 解决函数返回return的问题
2020/12/05 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
什么是岗位职责
2013/11/12 职场文书
安全教育月活动总结
2014/05/05 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
长江三峡导游词
2015/01/31 职场文书