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绘制可视化图表的更多相关文章

  1. 用ECharts绘制Prometheus图表,实现类似Grafana的自定义Dashboard

      大家一般都是用Grafana自定义Dashboard来监控Prometheus数据的,作者这次尝试用ECharts来绘制Prometheus数据图表,一方面可以减少依赖,另一方面可以将监控界面灵活 ...

  2. JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

    本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对 ...

  3. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  4. Echarts数据可视化,easyshu图表集成。

      介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...

  5. vue可视化图表 基于Echarts封装好的v-charts简介

    **vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...

  6. 数据可视化图表ECharts

    介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

  7. Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢?

    Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢? 可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的.对于初学者来说,很容易被这官网上 ...

  8. Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表

    上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础.接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表. 通常,这类需求在客户端应用中不太会用到 ...

  9. 快速上手 Echarts

    最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...

随机推荐

  1. LCA问题

    基本概念 LCA:树上的最近公共祖先,对于有根树T的两个结点u.v,最近公共祖先LCA(T,u,v)表示一个结点x,满足x是u.v的祖先且x的深度尽可能大. RMQ:区间最小值查询问题.对于长度为n的 ...

  2. HTML 5 全局属性

    下面的全局属性可用于任何 HTML5 元素.HTML 5 全局属性NEW:HTML 5 中新的全局属性.属性 描述accesskey 规定访问元素的键盘快捷键class   规定元素的类名(用于规定样 ...

  3. 对java框架的几点认识

    java框架实在是太多了,网上一抄一大段,根本就了解不到什么.我还是以我的经验来说一下j2ee的框架.1.首先力推struts2框架,这是最经典的框架(可以说没有“之一”).可以帮你快速搭建出一个MV ...

  4. 分享一下常用的hosts列表

    #以下的hosts能够保证基本的谷歌服务不受影响,其他网站则不一定能够顺利访问,Youtube视频无法播放,但是可以顺利上传视频 #Thanks smarthosts  ,  老夏 ,Humorce  ...

  5. 组策略彻底解决windows 2003 终端数

         win2003的话可以从组策略修改: 组策略级别要高于终端服务配置,当启用组策略后终端服务配置中的相应选项会变成灰色不可修改 运行-gpedit.msc-计算机配置-管理模板-Windows ...

  6. 跨域的小小总结:js跨域及跨域的几种解决方法

    一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...

  7. linux下安装svn(基于编码的方式)

    svn是什么,相信能看到这里的同学应该不会有这个问题了,费话不多说,开始: 1.创建目录 mkdir /home/svn/ 2.获取安装svn所需源文件(svn的官方网址是http://subvers ...

  8. ZOJ 1057 Undercut(简单模拟)

    Undercut 题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=57 题目大意:a card game,two pla ...

  9. boost::function实践——来自《Beyond the C++ Standard Library ( An Introduction to Boost )》

    代码段1: #include <boost/function.hpp> #include <iostream> float mul_ints(int x, int y) { r ...

  10. WF学习笔记(三)

    Collection 集合 -AddtoCollection<T> 添加项到集合 :[AddtoCollection]可以将一个项添加到[Collection]集合中 ,[Item]属性用 ...