模拟疫情地图

基本示例

1.引入 ECharts 需要的 jar 包

1
2
3
4
<!-- <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
<script src="../../resources/echarts/dist/echarts.min.js"></script>
<script src="../../resources/js/jquery-3.4.1.min.js"></script>

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
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));

// 指定图表的配置项和数据
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [
Math.random(5),
Math.random(20),
Math.random(36),
Math.random(10),
Math.random(10),
Math.random(20),
],
},
],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

在这里插入图片描述 3.折线图-前端

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
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));

window.onload = function () {
$.ajax({
type: "get",
url: "/line/charts",
dataType: "json",
// success: (data, statusText, xhr) => {
success: function (data) {
// $.get('data.json', function(data) { //与服务器连接成功
myChart.setOption(
(option = {
title: {
text: "ECharts 异步加载数据",
},
tooltip: {},
legend: {
data: ["访问量"],
},
xAxis: {
// 横坐标值:data.name
data: data.categories,
},
yAxis: {},
series: [
{
name: "访问量",
type: "line",
// data:data.data[200,100,350,90,11]
data: data.data,
},
],
})
);
// });
},
});
};
</script>

在这里插入图片描述 4.个性化图表样式

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
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" value="reset" onclick="reset()" />
<script type="text/javascript">
function reset() {
window.location.reload();
}

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption(
(option = {
backgroundColor: "#2c343c",
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1],
},
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
data: [
{
value: 235,
name: "视频广告",
},
{
value: 274,
name: "联盟广告",
},
{
value: 310,
name: "邮件营销",
},
{
value: 335,
name: "直接访问",
},
{
value: 400,
name: "搜索引擎",
},
],
roseType: "angle",
label: {
normal: {
textStyle: {
color: "rgba(255, 255, 255, 0.3)",
},
},
},
labelLine: {
normal: {
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
},
},
},
itemStyle: {
normal: {
color: "#c23531",
shadowBlur: 200,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
})
);
</script>

在这里插入图片描述 5.异步加载图表

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
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
data: [5, 20, 36, 10, 10, 20],
});
}, 1000);
}
myChart.setOption(
(option = {
title: {
text: "异步数据加载示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: [],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [],
},
],
})
);

myChart.showLoading();

fetchData(function (data) {
myChart.hideLoading();
myChart.setOption({
xAxis: {
data: data.categories,
},
series: [
{
// 根据名字对应到相应的系列
name: "销量",
data: data.data,
},
],
});
});
</script>

在这里插入图片描述)在这里插入图片描述

模拟疫情图

  1. 引入 echarts

    npm install echarts –save

  2. 引入 jsonp

    npm istall jsonp –save

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
<div id="map"></div>
</template>

<script>
// 导入Echarts
import echarts from "echarts";
// 导入中国地图
import "echarts/map/js/china";
// 引入jsonp
import jsonp from "jsonp";

const option = {
title: {
text: "模拟疫情地图",
},
visualMap: [
{
// 分段型
type: "piecewise",
show: true,
splitNumber: 6,
pieces: [
{
min: 10000,
}, // 不指定 max,表示 max 为无限大(Infinity)。
{
min: 1000,
max: 9999,
},
{
min: 100,
max: 999,
},
{
min: 10,
max: 99,
},
{
min: 1,
max: 9,
},
{
min: 0,
max: 0,
},
],
inRange: {
symbol: "rect",
color: [
"#fff",
"#ffaa85",
"#ff7b69",
"#cc2929",
"#8c0d0d",
"#660208",
],
},
itemHeight: 10,
itemWidth: 20,
},
],
// 鼠标悬浮的提示信息
// 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
tooltip: {
trigger: "item",
formatter: "地区:{b}<br/>确诊:{c}",
position: function (point, params, dom, rect, size) {
// 固定在顶部
return [point[0], "10%"];
},
},
series: [
{
// 图表的类型
type: "map",
map: "china",
label: {
// 显示各个省份名称
show: true,
fontSize: 12,
color: "black",
},
itemStyle: {
// 区域的背景颜色
areaColor: "#fff",
},
// 高亮状态下
emphasis: {
label: {
fontSize: 15,
color: "#4adbaf",
},
// 控制鼠标滑过时的高亮样式
itemStyle: {
// 地图区域的多边形 图形颜色
areaColor: "#c7fffd",
borderColor: "#B03A5B",
},
},
// 当前视角的缩放比例
zoom: 1.2,
data: [
{ name: "北京", value: 200 },
{ name: "湖北", value: 20000 },
],
},
],
};

export default {
data() {
return {
myChart: "",
};
},
mounted() {
// 基于准备好的dom,初始化echarts实例
this.myChart = echarts.init(document.getElementById("map"));
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
},
created() {
this.getData();
},
methods: {
// 获得真实数据
getData() {
// 解决访问跨域问题
jsonp(
"http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427",
{},
(erros, data) => {
// console.log(data);
// console.log(data.data.list)
var lists = data.data.list.map((item) => {
return {
name: item.name,
value: item.value,
};
});
option.series[0].data = lists;
this.myChart.setOption(option);
}
);
},
},
};
</script>

<style lang="less" scoped>
#map {
width: 1050px;
height: 620px;
}
</style>

Echarts 官方文档

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信