效果如下图：

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 地图图的更多相关文章

  1. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

  2. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

  3. echarts迁徙图

    前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个 预览地址: https://gallery.echartsjs.com/editor.html?c=xYS-YtzOa ...

  4. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  6. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  7. 使用echarts水球图

    使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...

  8. Echarts 地图添加自定义区域

    使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...

  9. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

随机推荐

  1. HDU 3791 二叉搜索树

    二叉搜索树 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. TL（简单）

    TL time limit per test 2 seconds memory limit per test 256 megabytes input standard input output sta ...

  3. Unity 资源管理与更新

    当你在 工程目录下的 Asset 文件夹中放置一个文件时(电脑上的文件夹,不是 Unity 界面中的文件夹),Unity会自动检测到一个新的文件被添加(Unity会不停地检查Assets文件夹中的内容 ...

  4. eclipse开发web应用程序步骤（图解）

    *运行环境(也就是服务器的选择) 环境搭建好之后开始编写web程序!然后右键->Run as -> Run on Server!

  5. Java 集合系列02之 Collection架构

    概要 首先,我们对Collection进行说明.下面先看看Collection的一些框架类的关系图: Collection是一个接口,它主要的两个分支是:List 和 Set. List和Set都是接 ...

  6. [IR] Tolerant Retrieval & Spelling Correction & Language Model

    Dictionary不一定是个list,它可以是多种形式. 放弃Hash的原因: 通常,tree是比较适合的结构. From: http://www.cnblogs.com/v-July-v/arch ...

  7. iOS-设计模式-懒加载

    一.为什么要懒加载? 答: iPhone设备内存有限,如果在程序在启动后就一次性加载将来会用到的所有资源,那么久可能会耗尽iOS设备的内存.这些资源例如大量的数据,图片,音频,过多的控件等. 二.懒加 ...

  8. node-gyp rebuild 卡住?

    最近 npm install 时候经常遇到在 node-gyp rebuild 那里卡很久的情况(大于十分钟),于是研究了一下输出的错误日志解决了这个问题,在这里分享一下. 首先,请检查 node-g ...

  9. C#语法糖之 ReflectionSugar 通用反射类

    用法很简单: ReflectionSugar rs = new ReflectionSugar(100);//缓存100秒 ,可以不填默认不缓存 rs.有嘛点嘛   性能测试: 性能测试类源码: ht ...

  10. html5中的大纲

    html5中的大纲 前言: 在html5中我们可以使用结构元素来编排一份大纲,这样我们就可以通过这个网页的大纲来了解网页中有哪些内容,网页中以什么样的形式来组织这些内容有更清楚的认识. 1.html5 ...