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数据：

北京

天津

上海

重庆

河北

河南

云南

辽宁

黑龙江

湖南

安徽

山东

新疆

江苏

浙江

江西

湖北

广西

甘肃

山西

内蒙古

陕西

吉林

福建

贵州

广东

青海

西藏

四川

宁夏

海南

台湾

香港

澳门

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', ...

随机推荐

POJ 2083 Fractal
Fractal Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6646 Accepted: 3297 Descripti ...
更改linux文件夹的默认颜色
我不知道正常人看Linux下面文件夹的颜色(默认为深蓝)是不是有点晕晕的,看不清楚,反正对我这样的色弱的人来说,我看着很不爽,所以我到网上去找了一下,如果修改文件夹颜色的方法,网上真实众说纷纭,很多都 ...
python 教程_【python 基础教程详解】
Lesson 1 准备好学习Python的环境下载的地址是:www.python.org为了大家的方便,我在校内作了copy:http://10.1.204.2/tool/compiler&I ...
zepto - slice
var ss = ['1', '2', '3', '4', '5', '6']; console.log(ss.slice(2,4));
vmware虚拟机工具vmware tools介绍及安装排错
VMware Tools是VMware虚拟机中自带的一种增强工具,相当于VirtualBox中的增强功能(Sun VirtualBox Guest Additions),是VMware提供的增强虚拟显 ...
编写高质量JS代码的68个有效方法（十）
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
Enum Helper
public static class EnumHelper { #region get /// <summary> /// 获得枚举类型所包含的全部项的列表 /// </summa ...
登陆mysql时提示异常的解决方法
[root@host2 ~]# mysql -uroot -p Enter password: ERROR (HY000): Can't connect to local MySQL server t ...
个人阅读作业Week17
个人阅读作业Week17 reading buaa software 解决的问题这是提出问题的博客链接:http://www.cnblogs.com/SivilTaram/p/4830893 ...
EL表达式经典用法
1.EL表达式获取list集合length长度: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix=&quo ...

echarts 地图图

echarts 地图图的更多相关文章

随机推荐

热门专题