echarts中地图和统计图的简单使用
echarts中地图和统计图的简单使用
不愿意做鱼的小鲸鱼
发布于 2022-09-26 18:22:06
发布于 2022-09-26 18:22:06
代码可运行
运行总次数：0
代码可运行
中国地图
1. 效果如下
2. 需要引入的文件
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>3. 样例代码如下
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<style>
* {
margin: 0;
}
</style>
</head>
<body style="height:100%;width:100%;">
<div id="main" style="width:100%;height:100%;"></div>
<script>
function randomValue() {
return Math.round(Math.random() * 2000);
}
option = {
backgroundColor: 'block',
tooltip: {
trigger: 'item',
formatter: function (params) {
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res = params.name + '<br />';
//定义一个变量来保存series数据系列
var myseries = option.series;
//循环遍历series数据系列
for (var i = 0; i < myseries.length; i++) {
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for (var k = 0; k < myseries[i].data.length; k++) {
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if (myseries[i].data[k].name == params.name) {
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res += myseries[i].name + ':' + myseries[i].data[k]
.value + '<br />';
}
}
}
return res;
}
},
visualMap: {
min: 0,
max: 2000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#e0ffff', 'red']
}
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
name: '浏览量',
type: 'map',
roam: false,
coordinateSystem: 'geo',
geoIndex: 0,
// tooltip: {show: false},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
},
data: [{
name: '北京',
value: randomValue()
},
{
name: '天津',
value: randomValue()
},
{
name: '上海',
value: randomValue()
},
{
name: '重庆',
value: randomValue()
},
{
name: '河北',
value: randomValue()
},
{
name: '河南',
value: randomValue()
},
{
name: '云南',
value: randomValue()
},
{
name: '辽宁',
value: randomValue()
},
{
name: '黑龙江',
value: randomValue()
},
{
name: '湖南',
value: randomValue()
},
{
name: '安徽',
value: randomValue()
},
{
name: '山东',
value: randomValue()
},
{
name: '新疆',
value: randomValue()
},
{
name: '江苏',
value: randomValue()
},
{
name: '浙江',
value: randomValue()
},
{
name: '江西',
value: randomValue()
},
{
name: '湖北',
value: randomValue()
},
{
name: '广西',
value: randomValue()
},
{
name: '甘肃',
value: randomValue()
},
{
name: '山西',
value: randomValue()
},
{
name: '内蒙古',
value: randomValue()
},
{
name: '陕西',
value: randomValue()
},
{
name: '吉林',
value: randomValue()
},
{
name: '福建',
value: randomValue()
},
{
name: '贵州',
value: randomValue()
},
{
name: '广东',
value: randomValue()
},
{
name: '青海',
value: randomValue()
},
{
name: '西藏',
value: randomValue()
},
{
name: '四川',
value: randomValue()
},
{
name: '宁夏',
value: randomValue()
},
{
name: '海南',
value: randomValue()
},
{
name: '台湾',
value: randomValue()
},
{
name: '香港',
value: randomValue()
},
{
name: '澳门',
value: randomValue()
}
]
},
{
name: '访问量',
type: 'map',
roam: false,
coordinateSystem: 'geo',
// geoIndex: 0,
// tooltip: {show: false},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
},
data: [{
name: '北京',
value: randomValue()
},
{
name: '天津',
value: randomValue()
},
{
name: '上海',
value: randomValue()
},
{
name: '重庆',
value: randomValue()
},
{
name: '河北',
value: randomValue()
},
{
name: '河南',
value: randomValue()
},
{
name: '云南',
value: randomValue()
},
{
name: '辽宁',
value: randomValue()
},
{
name: '黑龙江',
value: randomValue()
},
{
name: '湖南',
value: randomValue()
},
{
name: '安徽',
value: randomValue()
},
{
name: '山东',
value: randomValue()
},
{
name: '新疆',
value: randomValue()
},
{
name: '江苏',
value: randomValue()
},
{
name: '浙江',
value: randomValue()
},
{
name: '江西',
value: randomValue()
},
{
name: '湖北',
value: randomValue()
},
{
name: '广西',
value: randomValue()
},
{
name: '甘肃',
value: randomValue()
},
{
name: '山西',
value: randomValue()
},
{
name: '内蒙古',
value: randomValue()
},
{
name: '陕西',
value: randomValue()
},
{
name: '吉林',
value: randomValue()
},
{
name: '福建',
value: randomValue()
},
{
name: '贵州',
value: randomValue()
},
{
name: '广东',
value: randomValue()
},
{
name: '青海',
value: randomValue()
},
{
name: '西藏',
value: randomValue()
},
{
name: '四川',
value: randomValue()
},
{
name: '宁夏',
value: randomValue()
},
{
name: '海南',
value: randomValue()
},
{
name: '台湾',
value: randomValue()
},
{
name: '香港',
value: randomValue()
},
{
name: '澳门',
value: randomValue()
}
]
}
]
};
var chart = echarts.init(document.getElementById("main"))
chart.setOption(option);
</script>
</body>
</html>省份地图
1. 效果如下
2. 需要引入的文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>3. 需要请求获取省份的数据（json文件）
各个省份地图json下载地址： https://github.com/apache/incubator-echarts/tree/master/map 或者点击这里 链接：https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA 提取码：b397
4. 样例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="background-color: black;">
<div id="main" style="width: 605px;height: 550px;margin: 80px auto;"></div>
<script>
$(function () {
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get('./省份数据/json(省份)/jiangxi.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('云南', geoJson);
myChart.setOption(option = {
backgroundColor: 'black',
tooltip: {
trigger: 'item',
formatter: function (params) {
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res = params.name + '<br />';
//定义一个变量来保存series数据系列
var myseries = option.series;
//循环遍历series数据系列
for (var i = 0; i < myseries.length; i++) {
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for (var k = 0; k < myseries[i].data.length; k++) {
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if (myseries[i].data[k].name == params.name) {
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res += myseries[i].name + ':' + myseries[i].data[k]
.value + '<br />';
}
}
}
return res;
}
},
visualMap: {
min: 0,
max: 2000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#e0ffff', 'red']
}
},
geo: {
map: '云南',
roam: true,
label: {
normal: {
show: true,
color: 'rgba(0,0,0,0.4)'
}
},
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.7)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
"left": 50,
"right": 0,
"top": 0,
"bottom": 0
},
series: [{
name: '治愈病例',
type: 'map',
roam: false,
coordinateSystem: 'geo',
// geoIndex: 0,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
},
data: [{
name: '赣州市',
value: 222
},
{
name: '新余市',
value: 333
},
{
name: '抚州市',
value: 432
},
{
name: '吉安市',
value: 1234
},
{
name: '上饶市',
value: 324
}
]
},
{
name: '确诊病例',
type: 'map',
roam: false,
coordinateSystem: 'geo',
geoIndex: 0,
// tooltip: {show: false},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
},
data: [{
name: '赣州市',
value: 888
},
{
name: '新余市',
value: 677
},
{
name: '抚州市',
value: 1322
},
{
name: '吉安市',
value: 1234
},
{
name: '上饶市',
value: 4321
}
]
}
]
});
});
})
</script>
</body>
</html>注意：请求json文件必须使用服务器运行
条形、折线统计图
1. 效果如下
2. 需要引入的文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>3. 样例代码如下
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>第三部分</title>
</head>
<body>
<div id="main" style="height:600px;width: 1100px;margin-left: 30px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript">
$(function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
show: true,
// color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
dataZoom: {
show: true,
realtime: true,
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '邮件营销',
type: 'line',
// stack: '总量',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
// stack: '总量',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
// stack: '总量',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
// stack: '总量',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</body>饼图
1. 效果如下
2. 需要引入的文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>3. 样例代码如下
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '2018年TOP 25电影来源地区的分布情况',
subtext: '数据真实',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
right: "right",
data: ['中国大陆', '中国香港', '中国台湾', '美国', '印度'],
textStyle: {
fontSize: '14'
}
},
series: [{
name: '访问来源',
type: 'pie',
radius: '70%',
data: [{
value: 14,
name: '中国大陆'
},
{
value: 5,
name: '中国香港'
},
{
value: 2,
name: '中国台湾'
},
{
value: 11,
name: '美国'
},
{
value: 1,
name: '印度'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
textStyle: {
fontSize: '20'
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
}
}]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>总结
- 使用echarts一般可以自己网上找案例，或者去官网查看文档
- 如果使用的echarts是动态获取到，用到ajax不能使用异步的方式，不然渲染的时候拿不到数据，应该选择使用同步的方式（自己搞了半天，特别注意）
$.ajax({
type: "get",
url: "http://localhost:8080/area/chartData",
data: "data",
dataType: "json",
async: false,//使用同步
success: function (response) {
console.log(response);
}
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
