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 = 5000;

        /// <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(1,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 = 0; i < datas.Length; i++)
            {
                iphoneDataModel.Iphone3.Add(new CityModel()
                {
                    name = datas[i],
                    value = r.Next(Total)
                });
            }

            for (int i = 0; i < len; i++)
            {
                iphoneDataModel.Iphone4.Add(new CityModel()
                {
                    name = datas[i],
                    value = r.Next(Total)
                });
            }
            int size = r.Next(1,datas.Length);

            for (int i = 0; i < size; i++)
            {
                iphoneDataModel.Iphone5.Add(new CityModel()
                {
                    name = datas[i],
                    value = r.Next(Total)
                });
            }

            int i6Size = r.Next(1, datas.Length);

            for (int i = 0; i < i6Size; i++)
            {
                iphoneDataModel.Iphone6.Add(new CityModel()
                {
                    name = datas[i],
                    value = r.Next(Total)
                });
            }

            int i7Size = r.Next(1, datas.Length);

            for (int i = 0; i < i7Size; i++)
            {
                iphoneDataModel.Iphone7.Add(new CityModel()
                {
                    name = datas[i],
                    value = r.Next(Total)
                });
            }
            return Json<IphoneDataModel>(iphoneDataModel);
        }
    }
}
复制代码

3）data.txt数据：

复制代码
北京
天津
上海
重庆
河北
河南
云南
辽宁
黑龙江
湖南
安徽
山东
新疆
江苏
浙江
江西
湖北
广西
甘肃
山西
内蒙古
陕西
吉林
福建
贵州
广东
青海
西藏
四川
宁夏
海南
台湾
香港
澳门
复制代码

 

posted @   大空白纸  阅读(3803)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示