echarts使用多图的表达

记录瞬间

在实际的工作中总会遇到一些报表的展示问题，echarts作为百度的开源工具针对作图来说是不二选择。

教程链接： https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

参数设置：https://echarts.apache.org/zh/option.html#title

本文主要介绍使用echarts时关于一批关联数据，展示到一张图上的方法

主要应用：flask+bootstrap+echarts

由于使用flask的三方插件（pyecharts）在灵活处理非图表数据时较为复杂，所以需要考虑，单独使用echarts进行考虑

先将flask的pyecharts实现简单代码作以展示

def render_result(data):
    from pyecharts.charts import Bar, Grid, Timeline
    from pyecharts import options as opts
    # 内置主题类型可查看 pyecharts.globals.ThemeType
    from pyecharts.globals import ThemeType
    from pyecharts.globals import CurrentConfig
    from jinja2 import Markup, Environment, FileSystemLoader
    from pyecharts.commons.utils import JsCode
    # 关于 CurrentConfig，可参考 [基本使用-全局变量]
    CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./templates/echarts"))
    # js代码
    js_code_str = '''
                        function(params){
                        return params.data.text;
                        }
                        '''

    all_bar_keys = []
    # 获取所有的key数据  result是从执行结果的数据信息中获取的数据，不是最完整的数据结果
    for get_data in data:
        all_bar_keys += data[get_data]['result'].keys()
    # 去重
    get_bar_keys = list(set(all_bar_keys))  # 所有模块名称去重后的结果
    get_bar_keys.sort()                     # 排序保证每次显示的结果一致
    all_keys = list(data.keys())            # 获取执行的所有时间区间的值
    all_keys.sort(reverse=True)                         # 按照大小进行排序
    bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
        .add_xaxis([i for i in range(1, len(all_keys))])
        .set_global_opts(title_opts=opts.TitleOpts(title="结果展示", subtitle="统计当前展示结果"),
                         tooltip_opts=opts.TooltipOpts(formatter=JsCode(js_code_str)),
                         toolbox_opts=opts.ToolboxOpts(is_show=True,
                                                       feature={"saveAsImage": {},
                                                                "dataZoom": {"yAxisIndex": "none"},
                                                                "restore": {},
                                                                "magicType": {"show": True, "type": ["line", "bar",
                                                                                                     "stack"]}})
                         )
    )

    for bar_key in get_bar_keys:  # 遍历所有的模块数据
        get_list = []  # 保存执行结果中的，未出现模块个数数据，但不是最准确的数据结果

        temp_dict = {"value": 0, "text": ""}
        for data_key in all_keys:  # 遍历所有时间区间，筛选出符合相关模块的query词
            temp_dict["text"] = data_key + "<br>" + bar_key
            if bar_key in data[data_key]['result']:  # 结果是从执行query词的结果中获取的，不是最准确的结果，可参考
                temp_dict["value"] = len(data[data_key]['result'][bar_key])
                get_list.append(copy.deepcopy(temp_dict))
            else:
                temp_dict["value"] = 0
                get_list.append(copy.deepcopy(temp_dict))

        bar_ = (
            Bar()
            .add_xaxis([i for i in range(1, len(all_keys))])
            .add_yaxis(bar_key, get_list)
        )
        bar.overlap(bar_)

    get_all_order_dict = {}
    all_bar = []    # 保存所有模块下的柱状图
    row_list = []   # 记录行数据
    count = 1       # 遍历所有模块，每增加一个模块进行 +1 处理
    revise = 0      # 数据校正标记
    for bar_key in get_bar_keys:  # 遍历所有的模块数据
        get_all_order_dict[bar_key] = []
        for data_key in all_keys:
            if bar_key in data[data_key]['result']:
                for word in data[data_key]['result'][bar_key]:
                    if word not in get_all_order_dict[bar_key]:
                        get_all_order_dict[bar_key].append(word)
        get_len = len(str(get_all_order_dict[bar_key]))  # 获取所有词的长度
        rows = int(get_len / 85) + 1                     # 除以95后，获取需要分几行，每行在乘以30就可以获取到词位置的高度了
        
        title_pos = 460 + 330 * (count - 1) + revise
        
        legend_pos = 510 + 330 * (count - 1) + revise
        row_list.append(rows)
        if row_list[count - 1] > 3:
            revise += (row_list[count - 1] - 3) * 30
        print(title_pos, legend_pos, revise)
        key_bar = (
            Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK))
            .add_xaxis([i for i in range(1, len(all_keys))])
            .set_global_opts(title_opts=opts.TitleOpts(title="关键字统计展示-{}".format(bar_key),
                                                       subtitle="统计当前出现了关键字的相关词展示结果",
                                                       pos_top="{}px".format(title_pos)),
                             tooltip_opts=opts.TooltipOpts(formatter=JsCode(js_code_str)),
                             legend_opts=opts.LegendOpts(pos_top="{}px".format(legend_pos),
                                                         is_show=True, selected_mode='single'))
            # selected_mode 可以使用“single”、“multiple”使用单选或多选模式，默认为multiple
        )
        count += 1
        for word in get_all_order_dict[bar_key]:
            get_keys = []               # 保存所有模块的对应query词的个数数据，准确的结果
            temp_dict = {"value": 0, "text": ""}
            for data_key in all_keys:   # 遍历结果数据
                temp_dict["text"] = word + '<br>' + data_key + '<br>' + bar_key
                if bar_key in data[data_key]["keys_order"]:
                    if word in data[data_key]["keys_order"][bar_key]:
                        temp_dict['value'] = 1
                        get_keys.append(copy.deepcopy(temp_dict))
                    else:
                        temp_dict['value'] = 0
                        get_keys.append(copy.deepcopy(temp_dict))
                else:
                    temp_dict['value'] = 1
                    get_keys.append(copy.deepcopy(temp_dict))
            key_bar_ = (
                Bar()
                .add_xaxis([i for i in range(1, len(all_keys))])
                .add_yaxis(word, get_keys)
            )
            key_bar.overlap(key_bar_)
        all_bar.append(copy.deepcopy(key_bar))

    grid = Grid(init_opts=opts.InitOpts(theme=ThemeType.LIGHT, width='1100px', height='{}px'.format(700+len(row_list)*365)))
    grid.add(bar, grid_opts=opts.GridOpts(pos_left="5%", pos_right="1%", height="350px"))
    # grid.add(key_bar, grid_opts=opts.GridOpts(pos_top="520px", pos_left="5%", pos_right="1%", height="30%"))
    count = 1    # 循环展示模块的柱形图
    revise = 0   # 校正数据
    for key_bar in all_bar:
        # grid_pos = 600 + (240 + (sum(row_list[:count])) * 30) * (count - 1)
        if row_list[count - 1] > 3:
            revise += (row_list[count - 1] - 3) * 30
        grid_pos = 600 + 330 * (count - 1) + revise
        grid.add(key_bar, grid_opts=opts.GridOpts(pos_top="{}px".format(grid_pos), pos_left="5%",
                                                  pos_right="1%", height="150px"))
        count += 1
    # return Markup(bar.render_embed())
    return grid.render_embed()

方法调用如下：

@ots.route('aisi_summary', methods=["GET"])
def aisi_summary():
    get_time = get_time_section(96, flag=True)[1]
    get_objs = TempData.objects(CREATE_TIME__gte=get_time).all()
    if get_objs and len(get_objs) > 85:
        data = sfo.aisi_summary()
        from jinja2 import Markup
        get_render = render_result(data=data)
        return Markup(get_render)       # 直接渲染结果
    else:
        # 准备数据过程中
        try:
            executor.submit(sfo.aisi_summary, flag=True)
        except:
            pass
        return render_template("aisi_summary.html", error="数据修整中，请稍后重试！")

当然使用前提是需要安装pyecharts，并将pyecharts下面的模板放到templates目录下，才可以正常展示结果。

此结果是按照既定的pyecharts的模板进行渲染展示的，所以很大程度上无法进行非图表数据的展示

 

---

 

# 引入echarts

我们希望在展示图表数据的过程中，还要展示其他的数据，比如：判断结果，表格，说明等等

过程分为：1、数据准备；2、渲染页面；3、展示结果

数据准备代码

def total_result_for_data(data):
    result = {"height": 0, "x": [], "y": [], "title": ['结果概览'], "count": 0}
    all_bar_keys = []
    # 获取所有的key数据  result是从执行结果的数据信息中获取的数据，不是最完整的数据结果
    for get_data in data:
        all_bar_keys += data[get_data]['result'].keys()
    # 去重
    get_bar_keys = list(set(all_bar_keys))   # 所有模块名称去重后的结果
    get_bar_keys.sort()                      # 排序保证每次显示的结果一致
    result['title'] += get_bar_keys          # 主标题设置
    result['count'] = len(result['title'])   # 记录显示的柱形图的个数
    all_keys = list(data.keys())             # 获取执行的所有时间区间的值
    all_keys.sort(reverse=True)              # 按照大小进行排序
    result['all_keys'] = all_keys
    result['x'] = [i for i in range(1, len(all_keys)+1)]   # 生成x轴刻度
    # 总体数据展示结果
    get_all_order_dict = {}
    row_list = []  # 记录行数据
    count = 1      # 遍历所有模块，每增加一个模块进行 +1 处理
    result['结果概览_source'] = []
    result['结果概览'] = get_bar_keys
    result['grid_pos'] = [100]
    for bar_key in get_bar_keys:
        set_date_key = {"name": bar_key, "type": "bar", "data": [], "label": {"show": "true"}}
        for data_key in all_keys:           # 遍历所有时间区间，筛选出符合相关模块的query词
            temp_dict = {"value": 0, "text": data_key + '===' + bar_key}
            get_all_order_dict[bar_key] = []
            if bar_key in data[data_key]['result']:  # 结果是从执行query词的结果中获取的
                data_value = len(data[data_key]['result'][bar_key])
                temp_dict["value"] = len(data[data_key]['result'][bar_key])
            else:
                temp_dict["value"] = 0
                data_value = 0
            set_date_key["data"].append(copy.deepcopy(temp_dict))
            if bar_key in data[data_key]['result']:
                for word in data[data_key]['result'][bar_key]:
                    if word not in get_all_order_dict[bar_key]:
                        get_all_order_dict[bar_key].append(word)
        result['结果概览_source'].append(copy.deepcopy(set_date_key))
    print(result['结果概览_source'])
    for bar_key in get_bar_keys:            # 遍历所有的模块数据
        result[bar_key + "_source"] = []
        get_all_order_dict[bar_key] = []
        for data_key in all_keys:           # 遍历所有时间区间，筛选出符合相关模块的query词
            if bar_key in data[data_key]['result']:
                for word in data[data_key]['result'][bar_key]:
                    if word not in get_all_order_dict[bar_key]:
                        get_all_order_dict[bar_key].append(word)
        result[bar_key] = copy.deepcopy(get_all_order_dict[bar_key])

        get_len = len(str(get_all_order_dict[bar_key]))  # 获取所有词的长度
        rows = int(get_len / 85) + 1            # 除以85后，获取需要分几行，每行在乘以30就可以获取到词位置的高度了

        result['grid_pos'].append(70 + 30 * rows)

        count += 1
        for word in get_all_order_dict[bar_key]:
            set_date_key = {"name": word, "type": "bar", "data": [], "label": {"show": "true"}}
            for data_key in all_keys:  # 遍历结果数据
                temp_dict = {"value": 0, "text": word + '===' + data_key + '===' + bar_key}
                if bar_key in data[data_key]["keys_order"]:
                    if word in data[data_key]["keys_order"][bar_key]:
                        temp_dict["value"] = 1
                    else:
                        temp_dict["value"] = 0
                else:
                    temp_dict["value"] = 1
                set_date_key["data"].append(copy.deepcopy(temp_dict))
            result[bar_key + "_source"].append(copy.deepcopy(set_date_key))
        print(result[bar_key + "_source"])

    result['height'] = (len(row_list) + 1) * 365

    return result

前端代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="generator" content="Hugo 0.84.0">
    <title>数据分析</title>
    <link href="{{ url_for('static', filename='bs/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='bs/css/carousel.css') }}" rel="stylesheet">
    <!-- 引入echarts -->
    <script src="/static/js/echarts.min.js"></script>
</head>
<body>
{% include "common/header.html" %}

<div class="container">
    <main>
        <div style="margin-top:25px">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">监控</a></li>
                <li class="breadcrumb-item active" aria-current="page">数据分析</li>
              </ol>
            </nav>
        </div>
    <div class="px-4 py-5 my-5 text-left">
        {% if error %}
        <span style="color: #e4393c">{{ error }}</span>
        {% endif %}
    <table class="table table-hover">
        <tr><th style="text-align: center;font-size: 0.8cm;background-color: #c8e0cf">结果一览</th></tr>
        <tr>
            <td>
                <div id="main_picture"></div>
            </td>
        </tr>
        {% for foo in range(data.count) %}
        <tr>
            <td>
                <div id="main_picture_{{ foo }}"></div>
            </td>
        </tr>
        {% endfor %}
    </table>

    </div>
    </main>
</div>

{% include "common/footer.html" %}

<script src="/static/bs/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript">
    let temp_str = "{{ data }}".replace(/&#39;/g, '"');
    // 将接受的数据转换为json对象
    let obj = eval("("+temp_str+")");
    {% if data %}
        init(obj);
    {% endif %}

    function init(obj){
        console.log(obj);
        let num = obj.count;
        let xdata = obj.x;
        let title_data = obj.title;
        let grid_pos = obj.grid_pos
        for (let mpnum=0; mpnum<num; mpnum++){
            let main_picture = document.getElementById('main_picture_' + mpnum);
            //计算所需要的高度
            if (mpnum === 0) {
                main_picture.style.height = "440px";
            } else {
                main_picture.style.height = 150 + grid_pos[mpnum] + "px";
            }
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(main_picture);
            let toolbox = [];      // 设置
            let legend = [];       // 图例显示

            //通过配置xAxi和yAxis的gridIndex  series的xAxisIndex和yAxisIndex 来配套格子
            let option = {
                title: {
                      textAlign: "left",
                      text: title_data[mpnum],
                      subtext: title_data[mpnum],
                      top: "0px"
                },
                xAxis: {
                    type: "category",
                    data: xdata
                },
                yAxis: {
                  type: "value",
                  inverse: false,
                  splitLine: {
                    show: true
                  }
                },
                series: obj[title_data[mpnum]+"_source"],
                grid: {
                    left: "3%",
                    right: "1%",
                     "95%",
                    top: grid_pos[mpnum] + "px"
                }
            };
            // 工具栏设置
            if (mpnum === 0) {
                toolbox.push({
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataZoom: {show: true},
                        dataView: {show: true,readOnly: false},
                        magicType: {show: true,type: ['line', 'bar', 'stack']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                });
            } else {
                toolbox.push({
                    show: false
                });
            }
            option["toolbox"] = toolbox[0];
            option["tooltip"] = {
                position: "top",
                formatter: function (params) {
                    return params.data.text.replace(/===/g, "<br>");
                }
            };

            // 图例设置
            if (mpnum === 0){
                legend.push({
                    selectedMode: 'multiple',
                    top: "60px",
                    show: true
                });
            } else {
                legend.push({
                    selectedMode: 'single',
                    top: "60px",
                    show: true
               });
            }
            option["legend"] = legend[0];
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
</script>
</body>
</html>

展示结果如图

 当然图表都是动态加载的，整图下面还有其他的图表，由于截屏关系只截取当前两张

注意：当前使用的都是最新的版本（bootstrap-v5.0、echarts-5.1.2）

---

供参考---结束了

===