用Echarts 制作全国城市空气质量（PM2.5）自己的源代码

最新推荐文章于 2024-08-23 15:00:28 发布

Fate-

最新推荐文章于 2024-08-23 15:00:28 发布

阅读量9.1k

点赞数 2

分类专栏： Echarts制作城市空气质量文章标签： javascript 图形编程

本文链接：https://blog.csdn.net/chen_yanxia/article/details/24421945

版权

该博客介绍了如何使用ECharts库创建一个显示中国主要城市空气质量（PM2.5）的地图。代码示例展示了如何配置ECharts选项，包括地图类型、数据范围、标记点和提示信息等，以便于展示不同城市的PM2.5数值。

摘要由CSDN通过智能技术生成

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'EcharsOne.jsp' starting page</title>


<script src="./js/esl.js"></script>
<script src="./js/jquery.js"></script>

<script type="text/javascript">
require.config({
paths:{
echarts:./js/echarts',

'echarts/chart/map': './js/echarts-map',
}
});

var option = {
title : {
text: '全国主要城市空气质量（pm2.5）',
subtext: 'data from PM25.in',
x:'center'
},

tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['pm2.5']
},
dataRange: {
min : 0,
max : 800,
calculable : true,
color: ['maroon','purple','red','orange','yellow','lightgreen'],
textStyle:{
color:'#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
series : [
{
name: 'pm2.5',
type: 'map',
mapType: 'china',
hoverable: false,
roam:true, //放大缩小
data : [],
markPoint : {
symbolSize: 5, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle: {
normal: {
borderColor: '#87cefa',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: false
}
},
emphasis: {
borderColor: '#1e90ff',
borderWidth: 5,
label: {
show: false
}
}
},
data : [
{name: "海门", value: 9},
{name: "鄂尔多斯", value: 12},
{name: "招远", value: 12},
{name: "舟山", value: 12},
{name: "齐齐哈尔", value: 14},
{name: "盐城", value: 15},
{name: "赤峰", value: 16},
{name: "青岛", value: 18},
{name: "乳山", value: 18},
{name: "金昌", value: 19},
{name: "泉州", value: 21},
{name: "莱西", value: 21},
{name: "日照", value: 21},
{name: "胶南", value: 22},
{name: "南通", value: 23},
{name: "拉萨", value: 24},
{name: "云浮", value: 24},
{name: "梅州", value: 25},
{name: "文登", value: 25},
{name: "上海", value: 25},
{name: "攀枝花", value: 25},
{name: "威海", value: 25},
{name: "承德", value: 25},
{name: "厦门", value: 26},
{