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', ...
随机推荐
- PLSQL快捷补充代码设置
菜单Tools-->Preferences...然后依次选择下图红色选项 弹出下图对话框 输入需要快速生成的语句点击保存 点击Save后在slq窗口中输入 设置的语句缩写 列入:第一个sf 然 ...
- 未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序
在C#的web程序中读取服务器端的Excel文件时所报的异常 问题描述:在Visual Studio中运行.调试均没有问题,但是部署到Windows Server 2008 64位操作系统的IIS7 ...
- MyBatis知多少（11）企业数据库
企业数据库比应用程序数据库更大,其外部影响也更大.它们与其他系统之间存在更多的关系,包括依赖关系和被依赖关系.这些关系可能是Web应用程序与报表工具之间的,但也很有可 能是与其他的复杂系统和数据库的接 ...
- [Linux] 查看系统启动时间
查找系统最后启动时间 1. 使用 who 命令 who -b 输出: system boot 2015-10-14 00:51 2. 使用 last 命令 last reboot | head -1 ...
- 关于js中的回收机制，通俗版
在前面的几篇文章中,我讲解过了js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆. 如果你想学习闭 ...
- Hibernate基础映射
在说Hibernate映射前,我们先来了解下对象关系映射 ORM.ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现.这样开发人员就可以把对数据库的操作转化为对这些对象的操作.我们 ...
- java中产生对象的两种方式
/* * 普通new对象的过程! */ Person pp = new Person(); System.out.println(pp); /* * 利用代用参数的构造器产生对象实例! * 首先获得相 ...
- [转载]我们可以用SharePoint做什么
前言 不知不觉作为一个SharePoint的开发人员若干年了,从SharePoint API开始学习,到了解SharePoint的结构,逐渐一点点了解sharepoint的体系:从SharePoint ...
- Hadoop第6周练习—在Eclipse中安装Hadoop插件及测试(Linux操作系统)
1 运行环境说明 1.1 硬软件环境 1.2 机器网络环境 2 :安装Eclipse并测试 2.1 内容 2.2 实现过程 2.2.1 2.2.2 ...
- Parallax.js – 自适应智能设备方向的视差效果插件
Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应.在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替.有很多的行为,你就可以设置为任何给定的视差实例. ...