echarts3 使用（（绘制各种图表,地图））
2024-04-10 18:21:15
一、前期准备
1、使用echarts之前先要引入echarts.js，js可以到官网下载
2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。
3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使用setoption生成图表。
（代码如下）注：后面将不再对引入js，获取id，调用option生成图表做赘述
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id= "main" style= "width: 600px;height:400px;" ></div>
<!-- 引入echarts.js -->
<script src= "js/echarts.js " ></script>
<script>
获取容器的id并赋值给变量myChart
var myChart = echarts.init(document.getElementById( 'main' ));
/*用来配置参数*/
option = {
}
/*调用option生成图表*/
myChart.setOption(option)
</script>
</body>
</html>
|
二、各种图表使用
1、柱状图代码
?
|
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
|
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id= "main" style= "width: 600px;height:400px;" ></div>
<script src= "js/echarts.js " ></script>
<script>
var myChart = echarts.init(document.getElementById( 'main' ));
myChart.title = '坐标轴刻度与标签对齐' ;
option = {
color: [ '#3398DB' ],
tooltip : {
trigger: 'axis' ,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%' ,
right: '4%' ,
bottom: '3%' ,
containLabel: true
},
xAxis : [
{
type : 'category' ,
data : [ 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' , 'Sun' ],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: '直接访问' ,
type: 'bar' ,
barWidth: '60%' ,
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option)
</script>
</body>
</html>
|
运行结果
2、折线图
?
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<div id= "pic4" style= "width: 600px;height:400px;" ></div>
<script src= "js/echarts.js" ></script>
<script>
var myChart13 = echarts.init(document.getElementById( 'pic4' ));
var data = [];
option15 = {
title: {
text: '曲线' ,
},
tooltip: {
trigger: 'axis' ,
},
legend: {
data:[ '昨日(11月8日)' , '今日(11月9日)' ]
},
grid: {
left: '1%' ,
right: '1%' ,
bottom: '3%' ,
containLabel: true
},
toolbox: {
show: false ,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false },
magicType: {type: [ 'line' , 'bar' ]},
restore: {},
saveAsImage: {}
}
},
color:[ "red" , "#CD3333" ],
xAxis: {
type: 'category' ,
boundaryGap: false ,
data : [ '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' , '13' , '14' , '15' , '16' , '17' , '18' , '19' , '20' , '21' , '22' , '23' , '24' ]
},
yAxis: {
type: 'value' ,
name: '单位（kW）' ,
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name: '昨日(11月8日)' ,
type: 'line' ,
data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],
},
{
type: 'line' ,
name : '今日(11月9日)' ,
data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
}
]
};
myChart13.setOption(option15);
</script>
</body>
</html>
|
运行结果
3、饼图
由于代码重复就不浪费地方写所有代码，直接替换（一）中的option{}就可以
?
|
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
|
option = {
title : {
text: '某站点用户访问来源' ,
subtext: '纯属虚构' ,
x: 'center'
},
tooltip : {
trigger: 'item' ,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical' ,
left: 'left' ,
data: [ '直接访问' , '邮件营销' , '联盟广告' , '视频广告' , '搜索引擎' ]
},
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: '搜索引擎' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
|
运行结果
4、全国地图
由于地图比较复杂，所以把全部代码展示出来
china.js可以到官网下载所有代码，在echarts/map文件夹中可以找到china.js,
?
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id= "main" style= "width: 1000px;height:800px;" ></div>
/*<script src="node_modules/echarts/theme/shine.js"></script>*/
<script src= "js/echarts.js" ></script>
<script src= "node_modules/echarts/map/js/china.js" ></script>
<script type= "text/javascript" >
var myChart = echarts.init(document.getElementById( 'main' ), 'shine' );
function randomData() {
return Math.round(Math.random()*1000);
}
option = {
title: {
text: 'iphone销量' ,
subtext: '纯属虚构' ,
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical' ,
left: 'left' ,
data:[ 'iphone3' , 'iphone4' , 'iphone5' ]
},
visualMap: {
min: 0,
max: 2500,
left: 'left' ,
top: 'bottom' ,
text: [ '高' , '低' ], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: false ,
orient: 'vertical' ,
left: 'right' ,
top: 'center' ,
feature: {
dataView: {readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#C1232B' , '#B5C334' , '#FCCE10' , '#E87C25' , '#27727B' ,
'#FE8463' , '#9BCA63' , '#FAD860' , '#F3A43B' , '#60C0DD' ,
'#D7504B' , '#C6E579' , '#F4E001' , '#F0805A' , '#26C0C0'
];
return colorList[params.dataIndex]
},
}
},
name: 'iphone3' ,
type: 'map' ,
mapType: 'china' ,
roam: false ,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京' ,value: randomData() },
{name: '天津' ,value: randomData() },
{name: '上海' ,value: randomData() },
{name: '重庆' ,value: randomData() },
{name: '河北' ,value: randomData() },
{name: '河南' ,value: randomData() },
{name: '云南' ,value: randomData() },
{name: '辽宁' ,value: randomData() },
{name: '黑龙江' ,value: randomData() },
{name: '湖南' ,value: randomData() },
{name: '安徽' ,value: randomData() },
{name: '山东' ,value: randomData() },
{name: '新疆' ,value: randomData() },
{name: '江苏' ,value: randomData() },
{name: '浙江' ,value: randomData() },
{name: '江西' ,value: randomData() },
{name: '湖北' ,value: randomData() },
{name: '广西' ,value: randomData() },
{name: '甘肃' ,value: randomData() },
{name: '山西' ,value: randomData() },
{name: '内蒙古' ,value: randomData() },
{name: '陕西' ,value: randomData() },
{name: '吉林' ,value: randomData() },
{name: '福建' ,value: randomData() },
{name: '贵州' ,value: randomData() },
{name: '广东' ,value: randomData() },
{name: '青海' ,value: randomData() },
{name: '西藏' ,value: randomData() },
{name: '四川' ,value: randomData() },
{name: '宁夏' ,value: randomData() },
{name: '海南' ,value: randomData() },
{name: '台湾' ,value: randomData() },
{name: '香港' ,value: randomData() },
{name: '澳门' ,value: randomData() }
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
|
运行结果
5、城市地图（以北京为例）
beijing.js可以到官网下载所有代码，在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可
代码
?
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<html>
<head>
<meta charset= "utf-8" >
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
</head>
<body>
<div id= "main" style= "100%; height: 100%;" ></div>
</body>
<script src= "js/echarts.js" ></script>
<script src= "js/map/js/province/beijing.js" ></script>
<script>
var myChart = echarts.init(document.getElementById( 'main' ));
var option = {
title: {
text : '北京地图' ,
subtext : '-。-'
},
tooltip : {
trigger: 'item' ,
formatter: function (a){
return a[2];
}
},
legend: {
orient: 'vertical' ,
x: 'right' ,
data:[ '数据名称' ]
},
dataRange: {
min: 0,
max: 1000,
color:[ 'orange' , 'yellow' ],
text:[ '高' , '低' ], // 文本，默认为数值文本
calculable : true
},
series : [
{
name: '数据名称' ,
type: 'map' ,
mapType: '北京' ,
selectedMode : 'single' ,
itemStyle:{
normal:{label:{show: true }},
emphasis:{label:{show: true }}
},
data:[
{name: '怀柔区' ,value: Math.round(Math.random()*1000)},
{name: '延庆县' ,value: Math.round(Math.random()*1000)},
{name: '密云县' ,value: Math.round(Math.random()*1000)},
{name: '昌平区' ,value: Math.round(Math.random()*1000)},
{name: '平谷区' ,value: Math.round(Math.random()*1000)},
{name: '顺义区' ,value: Math.round(Math.random()*1000)},
{name: '门头沟区' ,value: Math.round(Math.random()*1000)},
{name: '海淀区' ,value: Math.round(Math.random()*1000)},
{name: '朝阳区' ,value: Math.round(Math.random()*1000)},
{name: '石景山区' ,value: Math.round(Math.random()*1000)},
{name: '西城区' ,value: Math.round(Math.random()*1000)},
{name: '东城区' ,value: Math.round(Math.random()*1000)},
{name: '宣武区' ,value: Math.round(Math.random()*1000)},
{name: '丰台区' ,value: Math.round(Math.random()*1000)},
{name: '房山区' ,value: Math.round(Math.random()*1000)},
{name: '通州区' ,value: Math.round(Math.random()*1000)},
{name: '大兴区' ,value: Math.round(Math.random()*1000)},
]
}
]
};
myChart.setOption(option);
</script>
</html>
|
运行结果
echarts3 使用（（绘制各种图表,地图））相关推荐
- Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍 二.环境搭建 三.使 ...
- 数据可视化——绘制3D图表和绘制地图
一.使用mplot3d绘制3D图表 1.1.mplot3d概述 matplotlib不仅专注于二维图表的绘制,也具有绘制3D图表.统计地图的功能,并将这些功能分别封装到工具包mpl_toolkits. ...
- JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图 实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
- Python pyecharts地理数据可视化 绘制地理图表
很喜欢的一句话 为什么有些人明明看起来友善 却总是喜欢独来独往 " 待人友善是修养,独来独往是性格 " 文章目录 一.Pyecharts简介和安装 1. 简介 2. 安装 二.绘制 ...
- python大数据可视化坐标轴的定制与绘制3D图表及统计地图
一.坐标轴的定制 1.概述: 坐标轴及其组成部分对应着matplotlib中一些类的对象︰坐标轴是axis.Axis类的对象,x轴是axis.Xaxis类的对象,y轴是axis.Yaxis类的对象;轴 ...
- python绘制3D图表
pyecharts绘制3D图表 参数配置和说明 Grid3DOpts.Axis3DOpts为3D图标需要配置项 Grid3DOpts:三位坐标系配置项 class pyecharts.options. ...
- 如何绘制产业招商地图
产业招商地图不是产业链图谱,也不等同于产业分布图,它是基于产业分布图及产业链上下游关系的基础上,来确定招商路线,并围绕自身产业招商需求,基于行业大数据和企业情报信息共同绘制的产业招商行动路径图.那么该 ...
- Python 绘制全球 2019-nCoV 地图
国内 2019-nCoV 得到控制后,我就没怎么再关心过 2019-nCoV ,最近看到一条新闻,全球 2019-nCoV 累计确诊人数已经突破 500w 大关,看到这个数字我还是有点吃惊的. 思来想 ...
- Python爬虫小记(2) :抓取全国各省市疫情实时数据 绘制2019-nCoV疫情地图
2021/07/15更新: 没有及时看到评论区反馈的问题,属实抱歉,拉下代码看了一下应该是Pyecharts中Map的data_pair数据类型发生了变化,现将dic_items转化 ...
最新文章
- golang range 遍历读写数据问题
- 你觉得 ThreadLocalRandom 这玩意真的安全吗？
- python入门到精通需要学多久-从Python入门到精通，你只需要在马哥教育待四个月...
- 【Git】Git 分支管理 ( 使用 git cherry-pick 命令提取提交记录应用于当前分支 | 创建新分支应用某个提交 | git cherry-pick 冲突处理 )
- python中re模块怎么导入_python如何导入re模块
- pvrect r语言 聚类_R语言实现KEGG通路富集可视化
- 【使用注意】多线程导致解码混乱的情况
- php js 循环对象属性,js 遍历对象的属性的代码_javascript技巧
- 入门机器学习(十三)--支持向量机(SVM)
- Remoting压缩信道的编程配置方式
- php获取sqlserver时间,PHP_php操作sqlserver关于时间日期读取的小小见解，上周五，要做一个php 同时对mys - phpStudy...
- 贾俊平统计学思维导图- 第一章 导论
- NETAPP存储常用巡检命令
- 鸿蒙系统图标大小怎么调节,华为手机桌面图标大小怎么调？用华为手机的朋友这些技巧需要了解...
- layui合并单元格(此方式适用于没有列冻结的单元格合并)
- Unity3D脚本中文系列教程(八)
- ai人工智能对话了_对话人工智能模型
- 【华为OD机试真题 Python】加扰字符串
- ｍａｉｎ函数带有参数
- 使用Ajax获取二进制数据流图片渲染到img标签