前端echarts连接数据库,echarts可视化编程题

7天刷卡带书的朋友，规则在这里：

今天从1.16日到1.23日结束

连续至少5天在 《有关SQL》 公众号留言，并获精选

留言内容要求14字以上，善意留言优先获得精选

不要在同一篇文章下连续打卡

送两位朋友，一人一本

导读：折线图是基础图，适合表示数据的变化趋势，经常用于时序数据的显示。

作者：漂亮的老虎

来源：大数据数据库(id:hzdashuju ) )。

在正式学习之前，请了解ECharts官方网站提供的便利功能。 这个功能可以实时显示代码的效果。 使用方法说明如下。

首先，打开ECharts官网，在“实例”菜单中选择其中一个图，如图4-1所示。

3359 e charts.Apache.org/exampl-es/zh/editor.html？ c=area-stack

图4-1 ECharts示例

可以看到，左侧显示了option，即ECharts的具体配置，右侧显示了相应的可视化图。 当我们改变左边的代码时，右边的可视化也会实时改变。 左边的代码错误时，右边不显示可视化，如图4-2所示。

图4-2 ECharts代码错误时的界面

您可能已经注意到了，可视化设置的大部分参数都在option中。 这样可以大大减少额外的工作，便于快速调试。 完成满意的可视化后，将option添加到框架中就可以了。 本文给出的代码和可视化结果图都是基于该在线工具实现的。

01基础折线图

要在ECharts中绘制折线图，必须将series的type设置为line。 代码如下所示。

option={ xaxis : } type : ' category '，data:['Mon '，' Tue '，' Wed '，' Thu '，' Fri '，' Sat，' sun

图4-3基础折线图

将参数smooth: true添加到series可以获得更平滑的多段线(曲线)。 代码如下所示。

option={ xaxis : } type : ' category '，data:['Mon '，' Tue '，' Wed '，' Thu '，' Fri '，' Sat，' sun 可视化结果如图4-4所示。

图4-4基础折线图(曲线)

02多条折线图

到这里为止，我学到了画一条折线图的方法。 当然，您也可以绘制多个折线图，如图4-5所示。

-align: center">

▲图4-5 多条折线图

此时我们在上面单条折线图的代码中做少量修改即可，具体代码如下：

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    legend: {        data: ['A产品销量', 'B产品销量','C产品销量'],        left: 'right'},    series: [{        name:'A产品销量',        data: [550, 232, 311, 764, 1090, 830, 500],        type: 'line',        smooth: true    },    {        name:'B产品销量',        data: [420, 162, 121, 474, 720, 640, 230],        type: 'line',        smooth: true    },    {        name:'C产品销量',        data: [850, 432, 501, 934, 1190, 930, 600],        type: 'line',        smooth: true    }]};

通过观察可以发现，series中并列了三个字典结构，分别存放A~C产品的数据，我们加入了legend图例，目的是为了区分A～C产品的数据。需要注意的是，A～C产品数据的name字段内容需要和legend中的内容一一对应。

03 堆叠折线图

有时候，我们需要使用堆叠折线图来反映不同项的累加情况，此时可以通过在ECharts的series的每项数据中加入stack和areaStyle参数实现，可视化结果如图4-6所示。

▲图4-6 堆叠折线图

具体实现代码如下：

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    legend: {        data: ['A产品销量', 'B产品销量','C产品销量'],        left: 'right'    },    series: [{        name:'A产品销量',        data: [550, 232, 311, 764, 1090, 830, 500],        type: 'line',        smooth: true,        stack: '总量',        areaStyle: {}    },    {        name:'B产品销量',        data: [420, 162, 121, 474, 720, 640, 230],        type: 'line',        smooth: true,        stack: '总量',        areaStyle: {}    },    {        name:'C产品销量',        data: [850, 432, 501, 934, 1190, 930, 600],        type: 'line',        smooth: true,        stack: '总量',        areaStyle: {}    }]};

其中，areaStyle用于对区域填充色彩，如果没有该参数，区域将不会有填充色，感兴趣的读者可以删除该参数看看效果。堆叠的顺序自上到下和数据的顺序相反，例如代码数据中的顺序是ABC，可视化图中自上到下的顺序是CBA。

为了方便辨识堆叠总量数据信息，可以在最上层的数据中加入label参数，同时加入tooltip方便查阅数据，修改后的代码如下：

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    legend: {        data: ['A产品销量', 'B产品销量','C产品销量'],        left: 'right'},    tooltip: {        trigger: 'axis',        axisPointer: {            type: 'cross',            label: {                backgroundColor: '#6a7985'            }        }    },    series: [{        name:'A产品销量',        data: [550, 232, 311, 764, 1090, 830, 500],        type: 'line',        smooth: true,        stack: '总量',        areaStyle: {}    },    {        name:'B产品销量',        data: [420, 162, 121, 474, 720, 640, 230],        type: 'line',        smooth: true,        stack: '总量',        areaStyle: {}    },    {        name:'C产品销量',        data: [850, 432, 501, 934, 1190, 930, 600],        type: 'line',        smooth: true,        stack: '总量',        label: {                normal: {                    show: true,                    position: 'top'                }            },        areaStyle: {}    }]};

可视化结果如图4-7所示。

▲图4-7 堆叠柱状图优化版

关于作者：干净的老虎，毕业于华东理工大学，硕士学历，目前就职于平安金融壹账通，从事数据挖掘算法工作，擅长ECharts、Python、自然语言处理、数据分析挖掘、机器学习。曾获微软最有价值专家（MVP）荣誉称号。

本文摘编自《ECharts数据可视化：入门、实战与进阶》，经出版方授权发布。

延伸阅读《ECharts数据可视化》

长按上方二维码了解及购买

转载请联系微信：DoctorData

推荐语：ECharts官方推荐，系统全面、由浅入深、注重实操，带领读者快速从新人到hldrjb。

欢迎加入《ECharts数据可视化》读者群????

划重点????