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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
浅谈react性能优化的方法
Sep 05 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
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
Python生成8位随机字符串的方法分析
2017/12/05 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
墨西哥网上超市:Superama
2018/07/10 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
UNIX特点都有哪些
2016/04/05 面试题
药学专业个人的自我评价
2013/12/31 职场文书
难忘的一课教学反思
2014/04/30 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
股票投资建议书
2014/05/19 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android