效果如下图：

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. CreateProcessAsUser,C#写的windows服务弹框提示消息或者启动子进程

    服务(Service)对于大家来说一定不会陌生,它是Windows 操作系统重要的组成部分.我们可以把服务想像成一种特殊的应用程序,它随系统的“开启-关闭”而“开始-停止”其工作内容,在这期间无需任何 ...

  2. ecshop的订单状态

    ecshop的订单状态都是在ecs_order_info表中的字段里. 订单状态 未确认 取消 确认 已付款 配货中 已发货 已收货 退货 order_status 0 2 1 1 1 5 5 4 s ...

  3. Google首席软件工程师Joshua Bloch谈如何设计一款优秀的API【附PPT】

    编者按]随着近来软件规模的日益庞大,API编程接口的设计变的越来越重要.良好的接口设计可以降低系统各部分之间的相互依赖,提高组成单元的内聚性,降低组成单元间的耦合度,从而提高系统的维护性和稳定性. J ...

  4. Qt Style Sheets Examples——定制前景色和背景色

    例子取自:http://qt-project.org/doc/qt-4.8/stylesheet-examples.html 以lineEdit为例 (1)设置某个lineEdit的背景色为黄色 li ...

  5. Android源码下载并绑定到Eclipse中

    在Windows下,通过SDK Manager.exe更新下载的Android,是不带源码的,我们开发开发起来不是很方便: 其实Android的源代码是可以下载的,其源代码入在http://andro ...

  6. 调皮的MySQL服务 请你不要再躲猫猫

    问题说明 Win10企业版 64位: MySQL5.6 64位: 临时在本机部署一套系统,需要用到MySQL,发现Windows服务下居然找不到MySQL这个服务,原先配置好的GUI以及应用程序都连不 ...

  7. xdebug调试一直等待连接

    调试php时一般会启动浏览器,地址栏里一般是 index.php?XDEBUG_SESSION_START=xxx xxx表示调试的ide_key. 开了代理没有关,结果调试时一直无法连上,折腾了好久 ...

  8. IIS 7完全攻略之日志记录配置(摘自网络)

    IIS 7完全攻略之日志记录配置 作者:泉之源 [IT168 专稿]除了 Windows 提供的日志记录功能外,IIS 7.0 还可以提供其他日志记录功能.例如,可以选择日志文件格式并指定要记录的请求 ...

  9. 编辑器之神VIM 总结(一) 基础部分

     版本号 说明 作者 日期  1.0  vim基础知识 Sky Wang 2013/06/19       概要 vim和emacs,一个是编辑器之神,一个是神一样的编辑器.他们被称是UNIX系统下的 ...

  10. [OpenCV] Image Processing - Grayscale Transform

    "每个像素的输出值只取决于其输入值" 重难点:Histogram equalization 参考:笑得很甜 http://blog.csdn.net/xiaowei_cqu/art ...