效果如下图：

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. net组件转化成COM组件

    第一步:生成秘钥文件 强名称工具 (Sn.exe) 有助于使用强名称对程序集进行签名.Sn.exe 提供了用于密钥管理.签名生成和签名验证的选项. 1.使用Visual Studio 命令 Visua ...

  2. Linux的段错误调试方法

    linux段错误的调试方法 相关博文: http://blog.csdn.net/htianlong/article/details/7439030 http://www.cnblogs.com/pa ...

  3. iOS-UIView-设置背景图片4种方式

    一 . 设置UIView的背景图片 1.将图片作为UIView的背景色,该方法过于占内存,不建议使用.     //1.imageNamed方式 self.view.backgroundColor = ...

  4. ASP.NET 让无码编程不在是梦 -.NET通用平台、通用权限、易扩展、多语言、多平台架构框架

    先拿出我半前年前平台的设计初稿,经过半年的努力我已经完成了该设计稿的所有功能.并且理念已经远远超出该设计稿. 下面是一些博友对我贴子的评价: 1.楼主,想法很美好,现实很骨感,我们公司就有一套你说的这 ...

  5. ASP.NET MVC分页实现

    ASP.NET MVC中不能使用分页控件,所以我就自己写了一个分页局部视图,配合PageInfo类,即可实现在任何页面任意位置呈现分页,由于采用的是基于POST分页方式,所以唯一的限制就是必须放在FO ...

  6. Velocity魔法堂系列一：入门示例

    一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不 ...

  7. JS魔法堂：精确判断IE的文档模式by特征嗅探

    一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...

  8. 下载image或者其他文件

    public void SaveDownLoadAsPNG(Image img, string filePath) { try { WebRequest request = WebRequest.Cr ...

  9. CART（分类回归树）原理和实现

    前面我们了解了决策树和adaboost的决策树墩的原理和实现,在adaboost我们看到,用简单的决策树墩的效果也很不错,但是对于更多特征的样本来说,可能需要很多数量的决策树墩 或许我们可以考虑使用更 ...

  10. SQL Server 诊断查询-(5)

    Query #57 Buffer Usage -- Breaks down buffers used by current database by object (table, index) in t ...