Echarts基本用法_动力节点Java学院整理


Posted in Javascript onAugust 11, 2017

echarts太完美了:

1,开源软件,无私的为我们提供漂亮的图形界面;

2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts;

3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了;

4,兼容性好,基于html5动画渲染超棒。

echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现。这样毕竟比较费时,我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示:

echarts饼状图实现步骤:

1,在简单的html中引入js文件

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
</body>

2,为图形准备容器

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
   
  <div id="picturePlace"></div> 
  
</body>

 就是在html中添加一个div给定id,图表就会显示在div中。

3,模块导入js

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <div id="picturePlace"></div> 
   <script type="text/javascript"> 
    // 路径配置 
    require.config({ 
      paths:{  
        'echarts' : 'js/echarts', 
        'echarts/chart/pie' : 'js/echarts' 
      } 
    }); 
  </script> 
</body>

4,添加显示数据

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <div id="picturePlace"></div> 
   <script type="text/javascript"> 
    // 路径配置 
    requireconfig({ 
      paths:{  
        'echarts' : 'js/echarts', 
        'echarts/chart/pie' : 'js/echarts' 
      } 
    }); 
     
     // 使用 
    require( 
      [ 
        'echarts', 
        'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 
      ], 
      function (ec) { 
        // 基于准备好的dom,初始化echarts图表 
        var myChart = ec.init(document.getElementById('picturePlace'));  
         
        option = { 
            title : { 
              text: '某站点用户访问来源', 
              subtext: '纯属虚构', 
              x:'center' 
            }, 
            tooltip : { 
              trigger: 'item', 
              formatter: "{a} {b} : {c} ({d}%)" 
            }, 
            legend: { 
              orient : 'vertical', 
              x : 'left', 
              data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 
            }, 
            toolbox: { 
              show : true, 
              feature : { 
                mark : {show: true}, 
                dataView : {show: true, readOnly: false}, 
                restore : {show: true}, 
                saveAsImage : {show: true} 
              } 
            }, 
            calculable : true, 
            series : [ 
              { 
                name:'访问来源', 
                type:'pie', 
                radius : '55%', 
                center: ['50%', '60%'], 
                data:[ 
                  {value:335, name:'直接访问'}, 
                  {value:310, name:'邮件营销'}, 
                  {value:234, name:'联盟广告'}, 
                  {value:135, name:'视频广告'}, 
                  {value:1548, name:'搜索引擎'} 
                ] 
              } 
            ] 
          }; 
     
        // 为echarts对象加载数据  
        myChart.setOption(option);  
      } 
    ); 
  </script> 
</body>

5,运行程序显示结果

以上是饼状图的实现步骤,柱状图散点图跟这个类似就是引用js时饼状图是pie,柱状图是bar,对应的option里面的数据不同,程序的架子是一样的。

Javascript 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
js 奇葩技巧之隐藏代码
Aug 11 #Javascript
echart简介_动力节点Java学院整理
Aug 11 #Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 #Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 #Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 #Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 #Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 #Javascript
You might like
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
AJAX的使用方法详解
2017/04/29 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python使用贪婪算法解决问题
2019/10/22 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
SQL Server面试题
2016/10/17 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
公司拓展活动方案
2014/02/13 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书