正文
echarts 地图图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
效果如下图：
1、下载echarts对应包：
http://echarts.baidu.com/
2、前端页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title> </head>
<body>
<div id="main" style="height:760px;"></div>
<script src="../Resource/js/jquery-1.8.2.js"></script>
<script src="../Resource/echarts-2.2.7/build/source/echarts-all.js"></script>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'iphone销量',
subtext: '测试数据',
x: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'left',
data: ['iphone3', 'iphone4', 'iphone5','iphone6', 'iphone7']
},
dataRange: {
min: 0,
max: 25000,
x: 'left',
y: 'bottom',
text: ['高', '低'],
calculable: true
},
series: [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: []
},
{
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: []
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: []
},
{
name: 'iphone6',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: []
},
{
name: 'iphone7',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: []
} ]
};
$.get("/Demo/GetData").done(function (data) {
option.series[0].data = data.Iphone3;
option.series[1].data = data.Iphone4;
option.series[2].data = data.Iphone5;
option.series[3].data = data.Iphone6;
option.series[4].data = data.Iphone7;
myChart.setOption(option);
}); </script>
</body>
</html>
3、后台：
1）Model-1
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace Test.One.Model
{
public class CityModel
{
public string name { get; set; } public int value { get; set; }
}
}
Model-2
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace Test.One.Model
{
public class IphoneDataModel
{
public List<CityModel> Iphone3 { get;set; } public List<CityModel> Iphone4 { get; set; } public List<CityModel> Iphone5 { get; set; } public List<CityModel> Iphone6 { get; set; } public List<CityModel> Iphone7 { get; set; }
}
}
2）Action：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Http;
using Test.One.Model;
using Newtonsoft.Json;
using System.Web.Http.Results; namespace Test.One.Apis
{ /// <summary>
/// Demo
/// </summary>
[RoutePrefix("Demo")]
public class DemoController:ApiController
{ private Random r = new Random();
private int Total = ; /// <summary>
///
/// </summary>
/// <returns></returns>
[HttpGet, Route("GetData")]
public JsonResult<IphoneDataModel> GetData()
{ string filePath = System.Web.Hosting.HostingEnvironment.MapPath("/Resource/City/data.txt");
string[] datas = File.ReadAllLines(filePath); int len = r.Next(,datas.Length); IphoneDataModel iphoneDataModel = new IphoneDataModel() {
Iphone3 = new List<CityModel>(),
Iphone4 = new List<CityModel>(),
Iphone5 = new List<CityModel>(),
Iphone6 = new List<CityModel>(),
Iphone7 = new List<CityModel>()
}; List<CityModel> citys = new List<CityModel>();
for (int i = ; i < datas.Length; i++)
{
iphoneDataModel.Iphone3.Add(new CityModel()
{
name = datas[i],
value = r.Next(Total)
});
} for (int i = ; i < len; i++)
{
iphoneDataModel.Iphone4.Add(new CityModel()
{
name = datas[i],
value = r.Next(Total)
});
}
int size = r.Next(,datas.Length); for (int i = ; i < size; i++)
{
iphoneDataModel.Iphone5.Add(new CityModel()
{
name = datas[i],
value = r.Next(Total)
});
} int i6Size = r.Next(, datas.Length); for (int i = ; i < i6Size; i++)
{
iphoneDataModel.Iphone6.Add(new CityModel()
{
name = datas[i],
value = r.Next(Total)
});
} int i7Size = r.Next(, datas.Length); for (int i = ; i < i7Size; i++)
{
iphoneDataModel.Iphone7.Add(new CityModel()
{
name = datas[i],
value = r.Next(Total)
});
}
return Json<IphoneDataModel>(iphoneDataModel);
}
}
}
3）data.txt数据：
北京
天津
上海
重庆
河北
河南
云南
辽宁
黑龙江
湖南
安徽
山东
新疆
江苏
浙江
江西
湖北
广西
甘肃
山西
内蒙古
陕西
吉林
福建
贵州
广东
青海
西藏
四川
宁夏
海南
台湾
香港
澳门
