Layui+Pyecharts地图使用

前端使用layui+echarts, 后端用flask+pyecharts，完成页面的地图显示

1.引入layui

2.引入echarts

使用地图时，还需引入对应地图的js,如需用中国地图时，则相应的china.js也需要引入

3.以上都是引入本地的js,也可以引入公网的资源

layui

CSS地址：https://www.layuicdn.com/layui-v2.5.6/css/layui.css 
JS地址：https://www.layuicdn.com/layui-v2.5.6/layui.js 
非模块化JS地址：https://www.layuicdn.com/layui-v2.5.6/layui.all.js 
 

echarts引入cdn上的js

echarts地址:https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

china地址:https://cdn.jsdelivr.net/npm/echarts/map/js/china.js

world地址:https://cdn.jsdelivr.net/npm/echarts/map/js/world.js

4.html代码

    
    
    
    
    
    




	
	    
			
				
				  Echarts图表
				  
					
						
					
				  
				
			

	    
	

5.引入了echarts.js, china.js, world.js, guangdong.js

1.python代码

from flask import Flask, render_template

from echarts import *


app = Flask(__name__, )


def echarts_map_china():
    provice = ['湖南', '湖北', '广东', '广西']
    data = [randrange(0, 100) for _ in range(4)]
    c = (
        Map(init_opts=opts.InitOpts(theme=ThemeType.CHALK))  # CHALK
            .add("CHINA", [list(z) for z in zip(provice, data)], "china")
            .set_global_opts(title_opts=opts.TitleOpts(title="Map-CHINA"), visualmap_opts=opts.VisualMapOpts(max_=200))

    )
    return c.dump_options_with_quotes()


def echarts_map_world():
    country = [
        "China",
        "Canada",
        "Brazil",
        "Russia",
        "United States",
        "Africa",
        "Germany",
    ]
    value = [randrange(0, 100) for _ in range(7)]
    c = (
        Map()
            .add("商家A", [list(z) for z in zip(country, value)], "world")
            .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
            .set_global_opts(
            title_opts=opts.TitleOpts(title="Map-世界地图"),
            visualmap_opts=opts.VisualMapOpts(max_=200),
        )
    )
    return c.dump_options_with_quotes()


def echarts_map_gd():
    city = ['深圳市', '汕头市', '汕尾市', '揭阳市', '阳江市', '肇庆市', '广州市', '惠州市']
    value = [186, 65, 111, 146, 74, 109, 39, 142]
    print(city, value)
    c = (
        Map(init_opts=opts.InitOpts(theme=ThemeType.CHALK))
            .add("商家A", [list(z) for z in zip(city, value)], "广东")
            .set_global_opts(
            title_opts=opts.TitleOpts(title="广东地图"), visualmap_opts=opts.VisualMapOpts()
        )
    )
    return c.dump_options_with_quotes()


@app.route("/")
def index():
    return render_template('layui-echarts.html', )


@app.post("/echarts-china")
def echarts_china():
    c = echarts_map_china()
    return c


@app.post("/echarts-world")
def echarts_world():
    c = echarts_map_world()
    return c


@app.post("/echarts-gd")
def echarts_china_gd():
    c = echarts_map_gd()
    return c


if __name__ == "__main__":
    app.run(debug=True)

三.前端AJAX请求

1.请求中国地图，url修改为/echarts-china

对应html截图

 2.请求世界地图, url修改为'/echarts-world'

3.请求广东地图，url修改为'/echarts-gd'