echarts 地图图

首页 > 代码库 > echarts 地图图

2024-08-28 07:28:12 209人阅读

效果如下图：

技术分享

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数据：

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

echarts 地图图

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > echarts 地图图

echarts 地图图

看完仍有疑问？有类似问题直接问程序猿