本文深入探讨了使用ECharts进行地图扩展和多地图显示的方法，包括地图引入、配置、自定义扩展图表类型以及创建多地图选项等关键步骤。详细介绍了如何在ECharts中引入地图资源、配置地图数据、实现地图区域的自定义展示，并通过实例展示了如何创建多个地图以展示不同区域的数据。此外，还讨论了地图显示效果的优化和色块显示的实现，为开发者提供了丰富的实践指南。
这二天在做一些图表，主要使用的是echart，其中echart最为主要的是如何引入？地图扩展到区域？多地图显示？
1、引用问题
首先引入：
<script src="../../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../Scripts/echarts/echarts.js" type="text/javascript"></script>其次配置
$(function () {
require.config({
paths: {
echarts: '../../../Scripts/echarts' //../../../Scripts/echarts/echarts.js的目录
}
});
require(
[
'echarts',
'echarts/chart/map' //注意chart文件夹
],function(ec){}地图扩展
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var cityMap = {"贵阳市": "贵阳市","观山湖区": "观山湖区","白云区": "白云区","花溪区": "花溪区","开阳县": "开阳县","南明区": "南明区", "清镇市": "清镇市","乌当区": "乌当区","息烽县": "息烽县", "修文县": "修文县", "云岩区": "云岩区"};
var curIndx = 0;
var mapType = [];
var mapGeoData=require('echarts/util/mapData/params');//params.js文件的目录但是不可以使用绝对或相对路径
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('../../../Scripts/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback); //区域对应的县区json数据
}
})(city)
}
}//循环结束
option={//....}
myChart.setOption(option);
}创建多地图的option
option = {
title: {
text: '本年度贵阳市生态价值区域分布',
subtext: '数据来源本年1月1日至今',
sublink: '',
x: 'center'
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = params.value + '';
value = value.replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + value + ' 元';
}
},
toolbox: {
show: true,
x: 'right',
y: 'bottom',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
dataRange: {
orient: 'horizontal',
x: 'center',
y: 'center',
min: <%=min %>, //后台传来的数据
max: <%=max %>,
splitNumber: 0, // 分割段数，默认为5
text: ['最大值', '最小值'],
calculable: true,
itemWidth: 40,
color: ['orangered', 'yellow', 'lightskyblue']
},
series: [{
name: '贵阳市',
type: 'map',
mapType: '贵阳市',
mapLocation: { x: '5%', y: '10%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [{ name: '贵阳市', value: <%=guiyangshi %> }]
},
{
name: '观山湖区',
type: 'map',
mapType: '观山湖区',
mapLocation: { x: '30%', y: '10%', width: '22%', height: '30%' },
itemStyle: itemStyle,
itemStyle: itemStyle,
data: [
{ name: '观山湖区', value: <%=guangshanghuqu %> }
]
},
{
name: '花溪区',
type: 'map',
mapType: '花溪区',
mapLocation: { x: '55%', y: '10%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '花溪区', value: <%=huaxiqu %> }
]
},
{
name: '开阳县',
type: 'map',
mapType: '开阳县',
mapLocation: { x: '76%', y: '10%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '开阳县', value: <%=kaiyangxian %> }
]
},
{
name: '南明区',
type: 'map',
mapType: '南明区',
mapLocation: { x: '5%', y: '60%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '南明区', value: <%=nanmingqu %> }
]
},
{
name: '乌当区',
type: 'map',
mapType: '乌当区',
mapLocation: { x: '23%', y: '60%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '乌当区', value: <%=wudangqu %> }
]
},
{
name: '息烽县',
type: 'map',
mapType: '息烽县',
mapLocation: { x: '45%', y: '60%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '息烽县', value: <%=xifengxian %> }
]
},
{
name: '修文县',
type: 'map',
mapType: '修文县',
mapLocation: { x: '63%', y: '55%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '修文县', value: <%=xiuwenxian %> }
]
}
,
{
name: '云岩区',
type: 'map',
mapType: '云岩区',
mapLocation: { x: '80%', y: '50%', width: '22%', height: '30%' },
itemStyle: itemStyle,
data: [
{ name: '云岩区', value: <%=yunyanqu %> }
]
}
]
};出现问题主要是引用出错
色块显示
.stat-container
{
display: table;
margin-bottom: 0.5em;
width: 100%;
}
.stat-holder
{
display: table-cell;
width: 25%;
}
.stat span
{
display: block;
margin-bottom: 0.4em;
font-size: 16px;
font-weight: 600;
font-style: normal;
color: #3266CC;
}
.stat
{
height: 30px;
padding: 15px;
margin-right: 1em;
font-size: 12px;
/* font-style: italic; */
text-align: center;
color: #000000;
background: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
text-shadow: 1px 1px 2px rgba(255,255,255,.5);
}
.stat-container .stat-holder:last-child .stat
{
margin: 0;
}
@media (max-width: 767px)
{
.stat-container
{
float: left;
display: block;
margin-bottom: 1em;
}
.stat-holder
{
float: left;
display: block;
width: 50%;
margin-bottom: 1em;
}
.stat
{
margin: 0 1em;
}
.stat-container .stat-holder:last-child .stat
{
margin: 0 1em;
} <div class="stat-container">
<div class="stat-holder" >
<div class="stat" style="background-color:#14B8D4">
<span><%=staDs.Tables[0].Rows[0]["Water"].ToString()%> 元</span>
涵养水源
</div> <!-- /stat -->
</div> <!-- /stat-holder -->
<div class="stat-holder">
<div class="stat" style="background-color:#EA494A">
<span><%=staDs.Tables[0].Rows[0]["Soil"]%> 元</span>
保育土壤
</div> <!-- /stat -->
</div> <!-- /stat-holder -->
<div class="stat-holder">
<div class="stat" style="background-color:#FFA93C">
<span><%=staDs.Tables[0].Rows[0]["Carbon"]%> 元</span>
固碳释氧
</div> <!-- /stat -->
</div> <!-- /stat-holder -->
<div class="stat-holder">
<div class="stat" style="background-color:#333333">
<span><%=staDs.Tables[0].Rows[0]["Nutrient"]%> 元</span>
营养物质
</div> <!-- /stat -->
</div> <!-- /stat-holder -->
</div>
<div class="stat-container">
<div class="stat-holder">
<div class="stat" style="background-color:#4CB158">
<span><%=staDs.Tables[0].Rows[0]["Air"]%> 元</span>
净化大气
</div> <!-- /stat -->
</div> <!-- /stat-holder --> <div class="stat-holder">
<div class="stat" style="background-color:#7932EA">
<span><%=staDs.Tables[0].Rows[0]["Diversity"]%> 元</span>
生物多样性
</div> <!-- /stat -->
</div> <!-- /stat-holder --> <div class="stat-holder">
<div class="stat" style="background-color:#F57943">
<span><%=staDs.Tables[0].Rows[0]["Play"]%> 元</span>
森林游憩
</div> <!-- /stat -->
</div> <!-- /stat-holder -->
</div> <!-- /stat-container -->
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
