echarts 地图图
效果如下图：
1、下载echarts对应包：
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数据：
北京
天津
上海
重庆
河北
河南
云南
辽宁
黑龙江
湖南
安徽
山东
新疆
江苏
浙江
江西
湖北
广西
甘肃
山西
内蒙古
陕西
吉林
福建
贵州
广东
青海
西藏
四川
宁夏
海南
台湾
香港
澳门
echarts 地图图的更多相关文章
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
- echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个 预览地址: https://gallery.echartsjs.com/editor.html?c=xYS-YtzOa ...
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- echarts柱图自定义为硬币堆叠的形式
看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- 使用echarts水球图
使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...
- Echarts 地图添加自定义区域
使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...
- Echarts 地图上显示数值
Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...
随机推荐
- csv大文件分割以及添加表头
注:这里说的大文件也不是太大,只有60多M而已(70多万条数据),相对比较大而已. 为了减轻编辑的工作,某种情况下网站上可能用会到csv格式的文件进行数据导入,但一般网站除了有上传文件大小限制以外,还 ...
- IOS8Preview-Huge for developer and Massive for everyone else
IOS8Preview-Huge for developer and Massive for everyone else 不管对于开发者还是用户来说,IOS8都是IOS自发布以来功能最强大的版本,但是 ...
- 对C#对象的Shallow、Deep Cloning认识【转】
好像园内比较多博客对 Shallow.Deep Cloning的翻译是深拷贝.浅拷贝,当时我懵了,这个叫法怎么怪怪的. 就好像看军情观察室,台湾评论员,导弹叫飞弹. 至于它们的区别,一张图就可以解释. ...
- [LeetCode] Pow(x, n) 二分搜索
Implement pow(x, n). Hide Tags Math Binary Search 题目很简单的. class Solution { public: double pow( ...
- 注意啦！10 个你需要了解的 Linux 网络和监控命令
下面列出来的10个基础的每个Linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些:hostname, ping, ifconfig, iwconfig, netstat, nslooku ...
- JS DOM元素
// 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...
- ruby -- 问题解决（一）无法连接mysql数据库
>rails g controller home index 运行该命令时无法连接mysql 先下载配置文件:mysql-connector-c-noinstall-6.0.2-win32. ...
- iOS- 微信支付 (服务器调起支付 )以及回调不成功的原因 不看后悔
写的不错,给留个言哈... 一. 支付准备工作 1. 微信相关准备工作 (1) 向微信官方开通支付功能. 这个不是前端的工作. (2) 导入官方下载的微信支付SDK包. 我用的是微信开放平台下载的SD ...
- Android 学习笔记 BroadcastReceiver广播...
PS:不断提升自己,是件好事... 学习内容: 1.BroadcastReceiver的使用.. 2.通过BroadcastReceiver去启动Service... 1.BroadcastRecei ...
- SQL Server 2014里的IO资源调控器
在本文中,我们将来看看SQL Server 2014在资源调控器方面增加了哪些新的功能.资源调控器(Resource Governor)是从SQL Server 2008开始出现的一项功能.它是用于管 ...