如何快速使用ECharts绘制可视化图表
1.在ECharts官网,下载ECharts的源码和示例文件。
2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目js目录文件夹下。
3.在页面的顶端引入模块加载器esl.js。
1
|
<script src=\' #\'" /esl.js"></script>
|
4.为ECharts准备一个具备大小的Dom。
1
|
<div id= "chartArea" style= "height:500px;border:1px solid #ccc;padding:10px;" ></div>
|
5.为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径。
1
2
3
4
5
6
7
|
require.config({
paths:{
echarts: './js/echarts' ,
'echarts/chart/bar' : './js/echarts' ,
'echarts/chart/line' : './js/echarts'
}
});
|
6.动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
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才能展现出图标的效果来。
如何快速使用ECharts绘制可视化图表的更多相关文章
- 用ECharts绘制Prometheus图表,实现类似Grafana的自定义Dashboard
大家一般都是用Grafana自定义Dashboard来监控Prometheus数据的,作者这次尝试用ECharts来绘制Prometheus数据图表,一方面可以减少依赖,另一方面可以将监控界面灵活 ...
- JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表
本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上. 对 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- Echarts数据可视化,easyshu图表集成。
介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...
- vue可视化图表 基于Echarts封装好的v-charts简介
**vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢?
Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢? 可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的.对于初学者来说,很容易被这官网上 ...
- Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础.接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表. 通常,这类需求在客户端应用中不太会用到 ...
- 快速上手 Echarts
最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...
随机推荐
- Linux 确定系统glibc版本
在shell中,可以直接运行glibc共享库文件获取glibc版本,CentOS下执行: /lib/libc.so. 输出为: GNU C Library stable release version ...
- Android多屏幕适配
转载:http://mikewang.blog.51cto.com/3826268/865304 问题: 测试时,发现应用在不同的显示器上显示效果不同(部分文本不能显示完全),自然想到屏幕适配的问题. ...
- html不同文档类型支持的元素标签
- CI框架篇之预热篇(1)
CodeIgniter 的基本都了解了,现在就开始预热,如果学习一门语言一样,我们最开始都是输出一个'HELLO WORLD'一样, 现在我们也通过输出这样一个内容,来了解基本的使用. CodeIgn ...
- document library\ picture library\Asset Library的默认文件夹
document library\ picture library\Asset Library的默认文件夹? document library 默认文件夹:Forms picture library默 ...
- 《你不常用的c#之四》:Array的小抽屉ArraySegment
转载自csdn:http://blog.csdn.net/robingaoxb/article/details/6200060 一:)略谈 ArraySegment顾名思义就是Array区块 ...
- ios专题 -线程互斥与同步
[原创]http://www.cnblogs.com/luoguoqiang1985 今天遇见了这问题,决定要需要讨论下. 线程同步的方法: @synchronized 官方文档解释:The @syn ...
- 分享一个自己写的基于TP的关系模型(三)
这段时间对模型做了升级和优化,并将版本更新到TP3.2. 下载 下载后请将目录放置TP的Library目录下 1.数据节点优化,原来的节点为模型的名称或者表名,现在更新为定义关系的方法名 public ...
- 关于谷歌浏览器下自动填写密码的bug
有的时候我们需要用到h5中input的新类型,type=password 这个可以很好的将输入的内容变成圆点,但是这样做也有一个小bug就是在某些我们不希望自动保存密码的页面中,也会出现浏览器自动帮我 ...
- jQuery 插件写法
一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQue ...