效果如下图：

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 3999 The order of a Tree

    The order of a Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  2. POJ 1363 Rails

    Rails Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21728   Accepted: 8703 Descriptio ...

  3. GDC2014免费slide整理下载

    GDC2014图形和程序相关的部分免费slide整理下载:)http://pan.baidu.com/s/1eQzMrxo gdc14_An Indie Approach to procedural ...

  4. windows下配置nginx+php

    [转] http://www.cnblogs.com/fengyuqing/p/php_nginx.html 1.首先需要准备的应用程序包. nginx:nginx/Windows-1.0.4 php ...

  5. mysql安装出现error Nr.1045 (转)

    http://www.cnblogs.com/Ivan-j2ee/archive/2012/09/22/2698278.html 我们在windows下安装mysql时会出现Access denied ...

  6. Unity 3D Intantiate过程中Transform 空物体和本体之间的关系

    想当年刚学Unity的时候,这个问题困扰了我好几天,因此来分享一下当初解决问题的思路. 我们通过Unity构建场景的过程中,经常发现一个现象,就是物体在拖进场景中后,我们会发现物体是反的,通过改变物体 ...

  7. 一起Polyfill系列：Function.prototype.bind的四个阶段

    昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...

  8. C#入门经典第五版之变量的更多内容编码题训练

    1. 编写一个控制台应用程序,它接收用户输入的一个字符串,将其中的字符以与输入相反的顺序输出. public string ReverseString(string str) { string rev ...

  9. C#入门经典第五版之变量与表达式编码题训练

    问题:编写一个控制台应用程序,要求用户输入4个int值,并显示它们的乘积.提示:可以使用Convert.ToDouble()命令,把用户在控制台上输入的数转换为double, 以此类推,转换成int命 ...

  10. Linq专题之对象初始化器

    在C#3.0之前,如果创建一个新的对象,往往需要调用类的构造函数来初始化该对象的值,在c#3.0提供了一个"对象初始化器"的机制,使得开发人员在创建新的对象时不通过调用类的构造函数 ...