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', ...
随机推荐
- 安卓开发笔记——自定义广告轮播Banner(实现无限循环)
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
- 多个Storyboard的使用
创建一个Storyboard工程 storyboard是在ios5中引入的新控件,能够更加清晰.简单的整合多个ViewController的关系,下面主要介绍一下怎么初建一个storyboard的工程 ...
- Android View绘制过程
Android的View绘制是从根节点(Activity是DecorView)开始,他是一个自上而下的过程.View的绘制经历三个过程:Measure.Layout.Draw.基本流程如下图: per ...
- SNF开发平台WinForm之十-Excel导入-SNF快速开发平台3.3-Spring.Net.Framework
7.1运行效果: 2.Excel导入开发实现 2.1. 创建窗体,修改命名空间 新增的窗体命名“FrmImport表名”,这个导入窗口比较其它窗口会特殊一些,需要继承BaseFormImport父级窗 ...
- how to create a framework for ios . cool!
预热. http://www.raywenderlich.com/65964/create-a-framework-for-ios http://insert.io/framework-ios8-xc ...
- Communication - 03.RILC
RIL层的作用大体上就是将上层的命令转换成相应的AT指令,控制modem工作.生产modem的厂家有很多:Qualcomm, STE, Infineon... 不同的厂家都有各自的特点,当然也会有各自 ...
- Hadoop第10周练习—Mahout部署及进行20newsgroup数据分析例子
:搭建Mahout环境 :运行20newsgroup 内容 运行环境说明 1.1 硬软件环境 线程,主频2.2G,6G内存 l 虚拟软件:VMware® Workstation 9.0.0 buil ...
- Linux - Yum的常用方法总结
简述 rpm是由红帽公司开发的软件包管理方式,使用rpm可以方便的进行软件的安装.查询.卸载.升级等工作. 但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时. Yum(全称 ...
- LitePal + Gson + Volley的ORM框架尝试方案
为了紧跟技术潮流,目前的项目开始采用ORM的思想进行重新设计. 数据库采用轻量级ORM框架LitePal,Json解析采用Gson,网络框架采用Volley. 如果只是单纯的将这些第三方框架引进来,事 ...
- sql server service broker中调用存储过程执行跨库操作,不管怎么设置都一直提示 服务器主体 "sa" 无法在当前安全上下文下访问数据库 "dbname"。
用sql server自带的消息队列service borker,调用存储过程中,执行了一个跨库的操作,先是用了一个用户,权限什么都给够了,但是一直提示 服务器主体 "user" ...