博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何快速使用ECharts绘制可视化图表
阅读量:6758 次
发布时间:2019-06-26

本文共 1656 字,大约阅读时间需要 5 分钟。

1.在官网,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才能展现出图标的效果来。

 

你可能感兴趣的文章
CSS进度条
查看>>
android的color值
查看>>
对于linux下system()函数的深度理解(整理)
查看>>
软件设计和开发准备
查看>>
ROS + Kinect2 跑ORB_SLAM2 安装步骤记录
查看>>
纯CSS实现垂直居中的几种方法
查看>>
win7注册表常用设置
查看>>
amazeui学习笔记--css(常用组件3)--按钮组Button-group
查看>>
Spring简介
查看>>
new Function()
查看>>
man page分類與說明
查看>>
站立会议3
查看>>
Libvirt 版本降级过程记录 4.5.0 to 3.9.0
查看>>
net core 的Generic Host 之Generic Host Builder
查看>>
SQL Server性能杀手
查看>>
1157: 零起点学算法64——回型矩阵
查看>>
Ubuntu系统清理瘦身
查看>>
How to Analyze Java Thread Dumps
查看>>
SQL-58 获取有奖金的员工相关信息。
查看>>
整数转为罗马数字
查看>>