搭配flask系统的复杂echarts柱状图配置详解

搭配flask系统的复杂echarts柱状图配置详解

一个柱形图，悬浮之后出现的是自定义的内容，同时通过颜色分类模型类别

结果图

初学者在遇到这个问题一定会发懵逼，毕竟这里面包含了很多要素

问题1，如何分类，毕竟一个横轴一般为一个列表，纵轴在一个列表

既然一个列表不行，那就两个列表吧，但是这里有一个要点是，虽然是两个列表，实际上是一个，即把两个列表拼接为了一个，一个列表中的其他数据就变成了”-“，同时设置两个分别name为两个列表的名字（后续可以根据name进行分类）

serice即列表数据部分

 series: [
     {
         name: 'regression',
         type: 'bar',
         stack: 'Total',
         label: {
             show: true,
             position: 'top'
         },
         data: [900, 345, 393, '-', '-', '-', '-']
     },
     {
         name: 'classfier',
         type: 'bar',
         stack: 'Total',
         label: {
             show: true,
             position: 'top'
         },
         data: ['-', '-', '-', 119, 361, 203]
     }
 ]
legend: {
    data: ['regression', 'classfier'],
    x: 'right'
},

问题2，如何悬浮出现不同结果

这里就引入出echarts和js配合的一个很强大的功能:只要是echarts里面的数据，都可以通过函数获取返回值，而只要是获取的返回值，都可以通过ajax去后台获取–当然这里给了我们一个很大的便利：可以通过一个内置的formatter方法传递柱子的一些参数

所以我们只需要通过一个formatter调用一个函数，然后给ajax传数据到后台，后台根据不同的数据传递给我们对应的每个柱子的返回值

在这里我们可以console.log()查看其自带参数params, ticket, callback等的内容

明显params是一个数组，分别是两个柱子的参数（其实是因为这里质上是两个柱子-虽然看上去只有一个）

我们可以将数据进行抽取性的返回，然后后端进行判别参数（携带”-“的内容为空柱子），进行对应的需要的内容的返回

（ajax请求本身是异步的，所以可以先return一些类似查询中的字样进行提示，然后再通过内置的callback进行回调）

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow',
    },
    formatter: function (params, ticket, callback) {
        $.ajax({
            method: "get",
            url: "/tooltitle",
            data: {
                "index": params[0].seriesName + "," + params[0].axisValueLabel,
            },
        })
            .then((res) => {
                callback(ticket, res);
            });
        return "数据查询中……";
    }
},

问题3，文字显示不全

这里主要是echarts的配置部分：由于配置的是x轴的数据，所以调整x轴XAxis即可，调整标签axisLabel，设置一个全部显示interval，以及一个rotate

xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
        interval: 0,//横轴信息全部显示
        rotate: 30,//-30度角倾斜显示
    }
},

总结

可以看到的是，在做图的过程中，主要还是依赖于echarts本身的函数配置，所以如果想要画好一个可视化图像，echarts的学习和运用还是相当重要的