pyecharts-中国富裕度绘图指南！

前言

        以下为数据，如果有更好的可视化也可以发出来，我想学~

     数据qwq

        数据来源于期末大作业中国富裕度数据，讲一讲敲pyecharts中间遇到的坑以及pyecharts使用教程（真好用啊！！！太美丽了家人们）

        数据是前20年的GDP以及人均收入和人均可支配收入

了解pyecharts

        pyecharts是一个包，咱这教程比较现实，所以主要以代码实现为主，很少讨论其他方面。

pip install pyecharts

        有了这行代码你就正式入门pyecharts啦

        可以通过 

                print(pyecharts.__version__)看当前版本，不同版本差别还是很大的（在于map等方面，之后会细讲）

        PS:推荐网站：真的很好用的pyecharts基础网站，该网站适合查一些基础接口以及参数调用

绘图代码详解

最后大概效果

        代码会分块逐步解答,并讲一讲敲的过程中遇到的一些坑

        1.基础包的导入

                正常情况下的包导入有：

pandas（pd），numpy（np），matplotlib.pyplot（plt）等常用包

                使用pyecharts导入时重点导入

基础版：

pyecharts.charts  (绘图的万物起源，所有图表导入来源于此)

from pyecharts import options as opts  (所有的修饰图表方法都需要用到) 

from pyecharts.global import ThemeType (修改界面使用)

升级版： 

from pyecharts.commons.utils import JsCode  (想要实现更多功能？那就回到JavaScript前端修改代码)

        2.数据预处理

                为什么需要进行省份名称转变呢！！！因为新版的pyecharts已经不支持识别缩写版（例如北京和北京省，如果不使用北京省而选择北京，会使得地图异常，这一步非常重要，这里也是直接给出对应代码模板，可直接抄）

# 读取数据
data = pd.read_excel("2000-2021年中国各省份富裕度指标（线性插值版）.xlsx")
data.fillna(0, inplace=True)  # 取出缺失值
region_temp = list(set(data["地区"].values.tolist()))  # 保存缩写了的省份名，对应回原data数据时需要使用
region = []  # 保存经过正式化处理的地区
loc = [(i, data.loc[data["地区"] == i, ["经度", "纬度"]].values.tolist()[0]) for i in region_temp]  # 获取经纬度
# 处理省份名称，非常重要！！！
for province_name in region_temp:  # 取出所有省份，规范化表述
    if province_name == "新疆":
        province_name = "新疆维吾尔自治区"
    elif province_name == "广西":
        province_name = "广西壮族自治区"
    elif province_name == "宁夏":
        province_name = "宁夏回族自治区"
    elif province_name in ["内蒙古", "西藏"]:
        province_name += "自治区"
    elif province_name in ["北京", "天津", "重庆", "上海"]:
        province_name += "市"
    elif province_name in ["香港", "澳门"]:
        province_name += "特别行政区"
    else:
        province_name += "省"
    region.append(province_name)

​

 这就是经过预处理后的数据（PS：因为中文字太长，所以这里无法一一对应数字）

        3.绘制点击内部的柱状图与折线图

                如何理解pyecharts代码流程：

                  1. 选择图表

                  2. add_xaxis(x轴)  只放入x轴无其他参数

                      add_yaxis(y值)  基础放入y值，可填入标签参数等

                  3. set_global_opts

                  这是图表的精髓，在我们日常中调整的方面有

标题（title）(opts.Title_Opts)

图例（legend）(opts.Legend_Opts)

标签（label）(opts.Label_Opts)

x轴格式（xaxis）(opts.Axis_Opts)，y轴格式（yaxis）(opts.Axis_Opts)

工具栏（toolbox）(opts.Toolbox_Opts)，光标显示（tooltip）(opts.Tooltips_Opts)       

                发现只要将想要修改的格式英文后面加上opts，就是对应的参数！！！（下面将以title_opts举例）

           title_opts = opts.Title_Opts(parmas)

                总结：
                        想要修改的参数1全英文小写 = opts.想要修改的参数1（参数2）

                        参数2适合从官网的文档中查找符合咱需求的参数

        4.set_series_opts()（选用）

                与global不同，这里是对细节处的打磨

        5.render("name.html")

                渲染成html(可以直接取代最后两条)

       最后总结，简单的一个pyecharts图可以从这几个方面入手                                

       

        问题

                如果渲染有问题，可能会导致如下结果：

        1. 全面空白：可能是创建图表或者设置x，y轴出现了问题

        2. 只有坐标轴，内容空白：可能是在set_global_opts出现了问题，就会导致内容空白

                 请记住，python不报错，但是却显示不出正确图像时，请打开F12（开发者控制台）中的控制台以查看相关JavaScript错误

                这一点是帮助你能够正确画出图形的关键哦~

        

        时间轴柱状图

name = ["人均GDP(元/人)", "农村居民人均可支配收入(元)", "城镇单位就业人员平均工资(元/人)",
"城镇居民人均可支配收入(元)"]  # 原四大数据名称
name_data = data.groupby("地区")  # 根据地区分组
if not os.path.isdir("total_save"):  # 如果没有这个文件夹，就创建一个，很好用的一个模板
    os.makedirs("total_save")  # 创建文件夹，用于保存所有图片
   
for i in range(len(region_temp)):  # 省份循环，制作出所有的省份图
    page = Page(layout=Page.SimplePageLayout)  # 创建页面，因为一个页面有两种图
    tl = Timeline()  # 创建时间轴

    total_name = ["人均GDP", "农村居民人均可支配收入", "城镇单位就业人员平均工资", "城镇居民人均可支配收入"]  # 创建缩写的四大数据名称
    name_region = region_temp[i]  # 获取当前省份名字
    i_data = name_data[name].get_group(name_region)  # 获取当前省份下的四个信息

    for j in range(32):  # 数据一共32年
        this = i_data.iloc[j][name]  # 获取第j年的信息
        bar = Bar()  # 创建柱状图
        bar.add_xaxis(total_name)  # 加入x轴
        bar.add_yaxis("", this.values.tolist(),  # 假如y轴，series_name是图例
                      label_opts=opts.LabelOpts(position="inside", is_show=True))  # position决定label是在外面还是里面

        bar = (bar.set_global_opts(
            title_opts=opts.TitleOpts(  # 设置标题
                title=f"{2021 - j}年{name_region}地区数据统计量",  # 设置每年不同的名字
                subtitle="注意纵坐标变换, 使用浏览器的返回可以回到大地图",  # 设置副标题
                is_show=True
            ),
            toolbox_opts=opts.ToolboxOpts(),  # 设置工具箱，在右上角体现
            xaxis_opts=opts.AxisOpts(  # 设置x轴属性
                axislabel_opts=opts.LabelOpts(
                    rotate=0,
                    font_size=11), # x轴值大小，不旋转可以直接删掉
                is_show=True, 
                interval=4),  # 设置距离
            tooltip_opts=opts.TooltipOpts(trigger="axis"),  # 设置y轴线，当鼠标放上去时显示的内容
        ))
        bar.set_series_opts(
            label_opts=opts.LabelOpts(
                font_size=17,
                is_show=True)  # 设置字体大小
        )


        tl.add(bar, f"{2021 - j}年")  # 柱状图放入时间轴，
    tl.add_schema(is_auto_play=True, play_interval=1500)  # 让时间轴自动播放，跳动的间隔为1500ms可改

  条形图与折线图汇总，双y轴图（水平有限多次修改导致对齐格式不太统一QAQ）

x_year = list(map(str, range(1990, 2022)))  # 设置x
this1 = list(reversed(i_data[name[0]].values.tolist()))  # 进行初始化数据， 其实可以用for循环的，但是懒得动脑
this2 = list(reversed(i_data[name[1]].values.tolist()))
this3 = list(reversed(i_data[name[2]].values.tolist()))
this4 = list(reversed(i_data[name[3]].values.tolist()))

bar = (
    Bar()
    .add_xaxis(x_year)  # 加入x轴
    .extend_axis(yaxis=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value}元/人"), type_="value", position="right"))  # 指定y轴名称，位置，类型

    # 设置柱状图的y轴，多个add_yaxis只是增加柱状图条数，不增加轴
    .add_yaxis(name[1], this2, label_opts=opts.LabelOpts(is_show=False), z=0)  # 加入
    .add_yaxis(name[3], this4, label_opts=opts.LabelOpts(is_show=False), z=0)

    .set_global_opts(
    yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value}元")),  # 设置另外一条y轴的格式
        title_opts=opts.TitleOpts(title="历年富裕度程度"),  # 设置图标题
        legend_opts=opts.LegendOpts(
        pos_top='5%',  # 设置图例位置
    ),
    tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),  # 设置光标在上面时的内容显示
    datazoom_opts=[opts.DataZoomOpts()]  # 设置缩放栏
            )
        )

    line = (
        Line()  # 设置折线图
        .add_xaxis(x_year)

        # index代表的是第几条坐标轴，默认为0，1代表了右边新加的坐标轴
        .add_yaxis(name[0], this1, yaxis_index=1,  label_opts=opts.LabelOpts(is_show=False))  
        .add_yaxis(name[2], this3, yaxis_index=1, label_opts=opts.LabelOpts(is_show=False))

        .set_series_opts(
            animation_opts=opts.AnimationOpts(
            animation_duration=3000,  # 动画持续时间，单位为毫秒
                )
            ))
        # overlap是将多个图表合并在同一张图的好东西
        bar.overlap(line)  # 将两个图表显示到一起

将绘制的两张图显示在同一个界面并保存，使用page实现

page.add(tl, bar)  # 将两个图形显示到一起
page.render(f"total_save/{region[i]}_detail.html")  # 保存下省份的内容

绘制大地图（python + JavaScript基本内容） 

  因为想根据不同的数据设置不同图表，所以需要运用方法，其他部分都有注释，这里重点讲一讲JavaScript实现光标放在上面的显示内容！

def distribute(name, num):
    dist = [data.loc[data["地区"] == region_temp[i], name].mean() for i in range(len(region_temp))]  # 初始化地区数据，获取name位置的数据
    input_list = [tuple(i) for i in zip(region, dist)]  # 初始化map要放入的内容
    rank = sorted(input_list, key=lambda x: x[1])  # 写入排名
    rank_region = [rank[i][0] for i in range(len(region_temp))]  # 地区按照
    rank = ['%.1f' % (i / len(region_temp) * 100) for i in range(len(region_temp))]  # 地区排名值

    map_total = Map(init_opts=opts.InitOpts(width="4000px", height="900px", theme=ThemeType.VINTAGE))  # 创建地图，并初始化风格为VINTAGE
    map_total.add("", input_list, maptype="china")  # 加入中国地图

    map_total.set_series_opts(
        label_opts=opts.LabelOpts(is_show=True),
        tooltip_opts=opts.TooltipOpts(
            trigger="item"
        ))  # 设置光标移动上去的效果

    map_total.set_global_opts(
        tooltip_opts=opts.TooltipOpts(  # 光标放在上面的效果
            trigger="item",
            formatter=JsCode("""
                放到下面来讲哦
"""
        ),  # 使用jscode实现光标放上去的文本内容，太难了

        title_opts=opts.TitleOpts(
            title="全国富裕值指标汇总图",  # 主标题
            subtitle="可点击省份获取详细信息",  # 副标题
            pos_right="center",  # 位置
            pos_top="5%"), # 顶部距离
        legend_opts=opts.LegendOpts(is_show=True, pos_left="left"),  # 图例信息
        visualmap_opts=opts.VisualMapOpts(  # 可视化颜色棒设计
            min_=int(min(dist)),
            max_=int(max(dist)) + 1,
            is_piecewise=False,  # 这个改为True就是分段颜色了
            item_width=20,  # 颜色棒宽度
            item_height=500,  # 颜色棒长度
            pos_top="10%", 
            pos_left="10%",  # 距离右侧
            orient="vertical",
            range_color=[["#F5ECCE", "#DF3A01"], ["#D0E1F9", "#003366"], ["#D9EAD3", "#6AA84F"], ][num]  # 这里是三种渐变颜色,渐变颜色挑选可以上网搜
        )

    )
    return map_total

 小贴士！！！在所有字符串部分，都一定要用单引号',否则将会报错（过来人看源码还有报错看了很久才看出来的，ai找不出来这个的错误点）报错内容如下

图形界面为空白，报错内容为Uncaught SyntaxError: Invalid or unexpected token

function(params) {  // params就是光标放在上面时对应的省份 
    var name1 = params.name;   // 省份名字 
    var value = params.value;  // 省份值
    var provincesWithOne=['江西省', '湖北省', '湖南省', '云南省', '四川省', '上海市', '江苏省', '浙江省', '贵州省', '重庆市', '安徽省'];  // 在长江经济带的省份
    var rank_region = [ 
    ['甘肃省', '贵州省', '广西壮族自治区', '西藏自治区', '云南省', '黑龙江省', '青海省', '江西省', '四川省', '吉林省', '山西省', '河北省', '河南省', '宁夏回族自治区', '安徽省', '海南省', '新疆维吾尔自治区', '湖南省', '陕西省', '辽宁省', '湖北省', '重庆市', '内蒙古自治区', '山东省', '广东省', '福建省', '浙江省', '天津市', '江苏省', '北京市', '上海市'],  
    ['甘肃省', '贵州省', '青海省', '云南省', '陕西省', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '山西省', '广西壮族自治区', '重庆市', '四川省', '河南省', '安徽省', '内蒙古自治区', '海南省', '湖南省', '黑龙江省', '江西省', '吉林省', '河北省', '湖北省', '辽宁省', '山东省', '福建省', '广东省', '江苏省', '天津市', '北京市', '浙江省', '上海市'], 
    ['甘肃省', '黑龙江省', '吉林省', '青海省', '贵州省', '宁夏回族自治区', '河南省', '山西省', '新疆维吾尔自治区', '陕西省', '江西省', '河北省', '海南省', '四川省', '广西壮族自治区', '湖北省', '安徽省', '云南省', '西藏自治区', '重庆市', '内蒙古自治区', '湖南省', '辽宁省', '山东省', '福建省', '天津市', '江苏省', '广东省', '浙江省', '北京市', '上海市']][%i]; //省份排名，因为我不知道列表占位符是什么，所以这里只能用老土办法直接复制过来一长串
    var rank = ['0.0', '3.2', '6.5', '9.7', '12.9', '16.1', '19.4', '22.6', '25.8', '29.0', '32.3', '35.5', '38.7', '41.9', '45.2', '48.4', '51.6', '54.8', '58.1', '61.3', '64.5', '67.7', '71.0', '74.2', '77.4', '80.6', '83.9', '87.1', '90.3', '93.5', '96.8']; // 排名    
    var this_loc = rank_region.indexOf(name1);  # 找到光标指向的省份的排名，如果没有这个省份，则会返回-1
    var this_value = rank[this_loc];  # 找到排名占比
    if (provincesWithOne.includes(name1)) {
        return name1 + '<br/>' + '%s' + ': ' + value + '<br/>' + '在全国排位中击败了' + this_value + '%s的城市' + '<br/>' + '处于长江经济带';
        } 
    else {  
        return name1 + '<br/>' + '%s' + ': ' + value + '<br/>' + '在全国排位中击败了' + this_value + '%s的城市' + '<br/>' + '不处于长江经济带';
        }  
    }  // 输出是否为长江经济带，<br/>代表换行
""" % (num, name, '%', name, '%'))

%s大家就当成python占位符就好了嘞，虽然用format会更方便，但是用占位符更直观一些

最后的效果

PS:如果你的省份名没有使用全称，则会是下面的样子并且在控制台都不会报错，本质上是pyecharts无法识别非全称省份

生成一份地图啦

# 生成地图，3份
tab = Tab()
tab.add(distribute("人均GDP(元/人)", 0), "人均GDP(元/人)")
tab.add(distribute("农村居民人均可支配收入(元)", 1), "农村居民人均可支配收入(元)")
tab.add(distribute("城镇居民人均可支配收入(元)", 2), "城镇居民人均可支配收入(元)")
tab.render("最最终版.html")

将大地图与小图表结合起来

方法1，使用beautifulsoup获取id

with open("最最终版.html", 'r', encoding="utf-8") as f:
    original = f.read()
soup = BeautifulSoup(original, features="html.parser")  # 使用爬虫基本知识，进行跳转图片的替换

# 查找特定的 div，并获取它的 id
chart_div = soup.find_all('div', class_='chart-container')

方法2，通过直接指定图表id（在设置图表时使用,举个例子）

init_opts=opts.InitOpts(chart_id='unique_id') 

bar = Bar(init_opts=opts.InitOpts(chart_id='unique_id'))  # unique_id填入想修改的id就可以

 获取到id接下来就要将地图的某一个板块与小图表链接

for i in res_id:  # res_id就是地图id的总和，因为有3个地图
    script_tag = f"setOption(option_{i});"  
    input_rag = """chart_%s.on('click', function(param) {    // params是光标点击时的省份名称
    var selected = param.name;  
    if (selected) {  
        location.href = "./total_save/" + selected + "_detail.html";  
    }  
});
""" % i
    original = original.replace(script_tag, f"{script_tag}\n        {input_rag}\n</script>")  # 换成点击跳转的形状，在两个位置都要替换

with open("最最终版.html", 'w', encoding='utf-8') as f:
    f.write(original)  # 写入最后的地图中，完成啦

这里给出跳转链接的原文,写的也是很好滴

参考文章，写的超级好~

最后给出全部代码，最后打开最最终版.html就可以运行了嘞

import pandas as pd
from pyecharts.charts import Map, Tab, Bar, Timeline, Line
from pyecharts import options as opts
from pyecharts.globals import ThemeType
import os
from pyecharts.commons.utils import JsCode
from bs4 import BeautifulSoup
from pyecharts.charts import Page

# 读取数据
data = pd.read_excel("2000-2021年中国各省份富裕度指标（线性插值版）.xlsx")
data.fillna(0, inplace=True)  # 取出缺失值
region_temp = list(set(data["地区"].values.tolist()))  # 保存缩写省份
region = []  # 保存经过正式化处理的地区
loc = [(i, data.loc[data["地区"] == i, ["经度", "纬度"]].values.tolist()[0]) for i in region_temp]  # 获取经纬度

# 处理省份名称
for province_name in region_temp:
    if province_name == "新疆":
        province_name = "新疆维吾尔自治区"
    elif province_name == "广西":
        province_name = "广西壮族自治区"
    elif province_name == "宁夏":
        province_name = "宁夏回族自治区"
    elif province_name in ["内蒙古", "西藏"]:
        province_name += "自治区"
    elif province_name in ["北京", "天津", "重庆", "上海"]:
        province_name += "市"
    elif province_name in ["香港", "澳门"]:
        province_name += "特别行政区"
    else:
        province_name += "省"
    region.append(province_name)


def create_bar():
    name = ["人均GDP(元/人)", "农村居民人均可支配收入(元)", "城镇单位就业人员平均工资(元/人)",
            "城镇居民人均可支配收入(元)"]
    if not os.path.isdir("total_save"):
        os.makedirs("total_save")

    name_data = data.groupby("地区")  # 根据地区分组
    for i in range(len(region_temp)):  # 省份循环
        page = Page(layout=Page.SimplePageLayout)  # 创建页面
        tl = Timeline()  # 创建时间轴
        total_name = ["人均GDP", "农村居民人均可支配收入", "城镇单位就业人员平均工资", "城镇居民人均可支配收入"]  # 创建缩写的名字
        name_region = region_temp[i]  # 获取当前省份
        i_data = name_data[name].get_group(name_region)  # 获取当前省份下的四个信息
        for j in range(32):
            this = i_data.iloc[j][name]  # 获取第j年的信息
            bar = Bar()  # 创建柱状图
            bar.add_xaxis(total_name)  # 假如x轴
            bar.add_yaxis("", this.values.tolist(),  # 假如y轴，series_name是图例
                          label_opts=opts.LabelOpts(position="inside", is_show=True))  # 决定值是在外面还是里面
            bar = (bar.set_global_opts(
                title_opts=opts.TitleOpts(  # 设置值标签
                    title=f"{2021 - j}年{name_region}地区数据统计量",  # 设置每年不同的名字
                    subtitle="注意纵坐标变换, 使用浏览器的返回可以回到大地图",
                    is_show=True
                ),
                toolbox_opts=opts.ToolboxOpts(),  # 设置工具箱
                xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=0, font_size=11), is_show=True,
                                         interval=4),  #
                tooltip_opts=opts.TooltipOpts(trigger="axis"),  # 设置y轴线，当鼠标放上去时显示的内容
            ))
            bar.set_series_opts(
                label_opts=opts.LabelOpts(font_size=17, is_show=True)  # 隐藏顶部标签
            )
            tl.add(bar, f"{2021 - j}年")  # 时间轴加入柱状图
        tl.add_schema(is_auto_play=True, play_interval=1500)  # 自动播放，跳动的间隔为1500ms

        x_year = list(map(str, range(1990, 2022)))  # 设置x
        this1 = list(reversed(i_data[name[0]].values.tolist()))  # 进行初始化数据， 其实可以用for循环的，但是懒得动脑
        this2 = list(reversed(i_data[name[1]].values.tolist()))
        this3 = list(reversed(i_data[name[2]].values.tolist()))
        this4 = list(reversed(i_data[name[3]].values.tolist()))
        bar = (
            Bar()
            .add_xaxis(x_year)  # 加入x轴
            .extend_axis(yaxis=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value}元/人"), type_="value", position="right"))
            # 加入额外的y轴并设定其格式为{value}元/人，value指代值
            .add_yaxis(name[1], this2, label_opts=opts.LabelOpts(is_show=False), z=0)  # 加入
            .add_yaxis(name[3], this4, label_opts=opts.LabelOpts(is_show=False), z=0)
            .set_global_opts(
                yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="{value}元")),  # 设置另外一条y轴的格式
                title_opts=opts.TitleOpts(title="历年富裕度程度"),  # 设置图标题
                legend_opts=opts.LegendOpts(
                    pos_top='5%',  # 设置图例位置
                ),
                tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),  # 设置光标在上面时的内容显示
                datazoom_opts=[opts.DataZoomOpts()]  # 设置缩放栏
            )
        )
        line = (
            Line()
            .add_xaxis(x_year)
            .add_yaxis(name[0], this1, yaxis_index=1, label_opts=opts.LabelOpts(is_show=False))
            .add_yaxis(name[2], this3, yaxis_index=1, label_opts=opts.LabelOpts(is_show=False))
            .set_series_opts(
                animation_opts=opts.AnimationOpts(
                    animation_duration=3000,  # 动画持续时间，单位为毫秒
                )
            ))

        bar.overlap(line)  # 将两个图表显示到一起

        page.add(tl, bar)  # 将两个图形显示到一起
        page.render(f"total_save/{region[i]}_detail.html")  # 保存下省份的内容


create_bar()


def distribute(name, num):
    dist = [data.loc[data["地区"] == region_temp[i], name].mean() for i in range(len(region_temp))]  # 初始化
    input_list = [tuple(i) for i in zip(region, dist)]  # 初始化map要放入的内容
    rank = sorted(input_list, key=lambda x: x[1])  # 写入排名
    rank_region = [rank[i][0] for i in range(len(region_temp))]  # 地区按照
    rank = ['%.1f' % (i / len(region_temp) * 100) for i in range(len(region_temp))]  # 地区排名值
    map_total = Map(init_opts=opts.InitOpts(width="4000px", height="900px", theme=ThemeType.VINTAGE))  # 创建地图
    map_total.add("", input_list, maptype="china")  # 加入中国地图

    map_total.set_series_opts(
        label_opts=opts.LabelOpts(is_show=True),
        tooltip_opts=opts.TooltipOpts(
            trigger="item"
        ))  # 设置光标移动上去的效果

    map_total.set_global_opts(
        tooltip_opts=opts.TooltipOpts(
            trigger="item",
            formatter=JsCode("""  
                function(params) {  
                    var name1 = params.name;  
                    var value = params.value;  
                    var provincesWithOne=['江西省', '湖北省', '湖南省', '云南省', '四川省', '上海市', '江苏省', '浙江省', '贵州省', '重庆市', '安徽省'];
                    var rank_region = [ 
    ['甘肃省', '贵州省', '广西壮族自治区', '西藏自治区', '云南省', '黑龙江省', '青海省', '江西省', '四川省', '吉林省', '山西省', '河北省', '河南省', '宁夏回族自治区', '安徽省', '海南省', '新疆维吾尔自治区', '湖南省', '陕西省', '辽宁省', '湖北省', '重庆市', '内蒙古自治区', '山东省', '广东省', '福建省', '浙江省', '天津市', '江苏省', '北京市', '上海市'],  
    ['甘肃省', '贵州省', '青海省', '云南省', '陕西省', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '山西省', '广西壮族自治区', '重庆市', '四川省', '河南省', '安徽省', '内蒙古自治区', '海南省', '湖南省', '黑龙江省', '江西省', '吉林省', '河北省', '湖北省', '辽宁省', '山东省', '福建省', '广东省', '江苏省', '天津市', '北京市', '浙江省', '上海市'], 
    ['甘肃省', '黑龙江省', '吉林省', '青海省', '贵州省', '宁夏回族自治区', '河南省', '山西省', '新疆维吾尔自治区', '陕西省', '江西省', '河北省', '海南省', '四川省', '广西壮族自治区', '湖北省', '安徽省', '云南省', '西藏自治区', '重庆市', '内蒙古自治区', '湖南省', '辽宁省', '山东省', '福建省', '天津市', '江苏省', '广东省', '浙江省', '北京市', '上海市']][%i]; 
                    var rank = ['0.0', '3.2', '6.5', '9.7', '12.9', '16.1', '19.4', '22.6', '25.8', '29.0', '32.3', '35.5', '38.7', '41.9', '45.2', '48.4', '51.6', '54.8', '58.1', '61.3', '64.5', '67.7', '71.0', '74.2', '77.4', '80.6', '83.9', '87.1', '90.3', '93.5', '96.8'];                    var this_loc = rank_region.indexOf(name1);
                    var this_value = rank[this_loc];
                    if (provincesWithOne.includes(name1)) {
                        return name1 + '<br/>' + '%s' + ': ' + value + '<br/>' + '在全国排位中击败了' + this_value + '%s的城市' + '<br/>' + '处于长江经济带';
                    } else {  
                        return name1 + '<br/>' + '%s' + ': ' + value + '<br/>' + '在全国排位中击败了' + this_value + '%s的城市' + '<br/>' + '不处于长江经济带';
                    }  
                }  
            """ % (num, name, '%', name, '%'))
        ),  # 使用jscode实现光标放上去的文本内容，太难了
        title_opts=opts.TitleOpts(
            title="全国富裕值指标汇总图",
            subtitle="可点击省份获取详细信息",
            pos_right="center",
            pos_top="5%"),  # 输入标题信息
        legend_opts=opts.LegendOpts(is_show=True, pos_left="left"),  # 图例信息
        visualmap_opts=opts.VisualMapOpts(  # 可视化颜色棒设计
            min_=int(min(dist)),
            max_=int(max(dist)) + 1,
            is_piecewise=False,  # 这个改为True就是分段颜色了
            item_width=20,
            item_height=500,
            pos_top="10%",
            pos_left="10%",
            orient="vertical",
            range_color=[["#F5ECCE", "#DF3A01"], ["#D0E1F9", "#003366"], ["#D9EAD3", "#6AA84F"], ][num]  # 这里是三种渐变颜色
        )

    )
    return map_total


# 生成地图，3份
tab = Tab()
tab.add(distribute("人均GDP(元/人)", 0), "人均GDP(元/人)")
tab.add(distribute("农村居民人均可支配收入(元)", 1), "农村居民人均可支配收入(元)")
tab.add(distribute("城镇居民人均可支配收入(元)", 2), "城镇居民人均可支配收入(元)")
tab.render("最最终版.html")

with open("最最终版.html", 'r', encoding="utf-8") as f:
    original = f.read()
soup = BeautifulSoup(original, features="html.parser")  # 使用爬虫基本知识，进行跳转图片的替换

# 查找特定的 div，并获取它的 id
chart_div = soup.find_all('div', class_='chart-container')
res_id = [i.get("id") for i in chart_div]
for i in res_id:
    script_tag = f"setOption(option_{i});"
    input_rag = """chart_%s.on('click', function(param) {  
    var selected = param.name;  
    if (selected) {  
        location.href = "./total_save/" + selected + "_detail.html";  
    }  
});
""" % i
    original = original.replace(script_tag, f"{script_tag}\n        {input_rag}\n</script>")  # 换成点击跳转的形状

with open("最最终版.html", 'w', encoding='utf-8') as f:
    f.write(original)
# 200行纪念