手把手教你使用ECharts绘制可视化图表
1.在ECharts官网,下载ECharts的源码和示例文件。
2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目js目录文件夹下。
3.在页面的顶端引入模块加载器esl.js。
<script src="js/esl.js"></script>
4.为ECharts准备一个具备大小的Dom。
<div id="chartArea" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
5.为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径。
require.config({paths:{echarts:'./js/echarts','echarts/chart/bar' : './js/echarts','echarts/chart/line': './js/echarts'}});
6.动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(['echarts','echarts/chart/bar','echarts/chart/line'],function(ec) {var myChart = ec.init(document.getElementById('main'));var option = {tooltip : {trigger: 'axis'},legend: {data:['蒸发量','降水量']},toolbox: {show : true,feature : {mark : true,dataView : {readOnly: false},magicType:['line', 'bar'],restore : true,saveAsImage : true}},calculable : true,xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{type : 'value',splitArea : {show : true}}],series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}]};myChart.setOption(option);});
7.效果图
8.注意事项
在实际项目中,ECharts图标的横坐标和纵坐标,均是在后台返回的数据中的得到的。在前端动态设置data数值时,data的类型必须是数组,EChars才能展现出图标的效果来。
转载于:https://blog.51cto.com/favccxx/1294417
手把手教你使用ECharts绘制可视化图表相关推荐
- python数据分析图_Python数据分析:手把手教你用Pandas生成可视化图表的教程
大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂,想要搞明白并非易事.但自从Python进入3.0时代以后, ...
- json 数据 生成 图表_Python数据分析:手把手教你用Pandas生成可视化图表
一: Pandas是什么? Pandas是一个强大的分析结构化数据的工具集:它的使用基础是Numpy(提供高性能的矩阵运算):用于数据挖掘和数据分析,同时也提供数据清洗功能. 利器之一:DataFra ...
- python数据生成可视化_Python数据分析:手把手教你用Pandas生成可视化图表
大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂,想要搞明白并非易事.但自从Python进入3.0时代以后, ...
- Python数据分析:手把手教你用Pandas生成可视化图表
大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂,想要搞明白并非易事.但自从Python进入3.0时代以后, ...
- 手把手教你用plotly绘制excel中常见的16种图表(下)
大家好,我是才哥. 上一期咱们介绍<手把手教你用plotly绘制excel中常见的16种图表(上)>演示了8种常见图表,今天我们继续演示另外8种常见图表的绘制. 文章目录 1. 树状图 2 ...
- 用python画皇冠_手把手教你用 Python 绘制酷炫的桑基图!
原标题:手把手教你用 Python 绘制酷炫的桑基图! 作者 | 周志鹏 责编 | 郭 芮 最近,不止一次收到小伙伴的截图追问: "这个图叫什么???" "这个图真好看! ...
- 手把手教你用ECharts画饼图和环形图
导读:饼图也是一种常用的基本图表,主要用来展示各项的比重. 作者:王大伟 来源:大数据DT(ID:hzdashuju) 下面制作一幅基础的饼图,将Echarts中series的type参数值设置为pi ...
- echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- java——插件echarts数据可视化图表库
插件echarts数据可视化图表库 一.使用idea创建javaWeb工程 二.下载echarts导入js文件 三.使用echarts. 特别鸣谢:感谢林老师传授 嘿嘿嘿 -------- 创作不易, ...
最新文章
- atom创建html文件夹,如何在Atom文本编辑器中按文件类型设置默认语法?
- [转载] static class 静态类(Java)
- Android5.1.1 - zygote中获取系统服务时抛出异常
- Error:(108) No resource identifier found for attribute #39;style#39; in package #39;android#39;
- ArcGIS AddIN开发异常之--修饰符“static”对该项无效
- How to Build Your Own Blockchain Part 4.1 — Bitcoin Proof of Work Difficulty Explained
- 3.3线性回归简洁实现(API的使用)
- ThinkPHP RBAC如何自动获取所有模块的函数
- siwper vue 上下滑动分页_支持移动端的vue滑动轮播图插件vueswiper
- 2011年国外最受欢迎的15个音乐网站
- 拓端tecdat|R语言markov switching model马尔可夫转换分析研究水资源
- Filter转译编码问题之谜
- JUnit4(三)高级之 assertThat和Matchers (匹配器)
- 【金猿产品展】沃丰科技GaussMind——用技术提升客户体验
- python白噪声检验_时间序列 平稳性检验 白噪声 峰度 偏度
- 洛谷 P3159(BZOJ 2668)[CQOI2012]交换棋子
- 基于物化视图创建分区(分区的物化视图)
- Java程序员必看:Solr vip竞价排名
- Asynctask源码级解析,深度探索源码之旅
- 利用php下载xls文件
热门文章
- python maketrans_Python maketrans()方法
- 优秀平面设计师必须拥有的设计思维
- mysql 左连接 例子_mysql左连接自连接例子
- 前端H5怎么切换语言_H5前端和移动APP开发知识点和配套视频
- c odac 连接 oracle,使用ODAC112040Xcopy_64bit 将sql server连接到oracle
- mysql 工具_MySQL压力测试工具,值得收藏
- java中四种常用的引用类型_java中四种引用类型
- java 自定义 转换器_Java笔记之SpringMVC(七):自定义String到Date的类型转换器
- jrebel热部署不起作用_5种SpringBoot热部署方式,你用哪种?
- php5.3中ZendGuardLoader与wincache冲突问题的解决方法