当前位置：Gxlcms > 数据库问题 > ?ECharts中BasicLine图+将mysql数据库中的方式通过echarts可视化

?ECharts中BasicLine图+将mysql数据库中的方式通过echarts可视化

时间：2021-07-01 10:21:17 帮助过：14人阅读

技术分享图片

 1 option = {
 2     xAxis: {
 3         type: ‘category‘,
 4         data: [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘]
 5     },
 6     yAxis: {
 7         type: ‘value‘
 8     },
 9     series: [{
10         data: [820, 932, 901, 934, 1290, 1330, 1320],
11         type: ‘line‘
12     }]
13 };

View Cod 显示效果：技术分享图片

技术分享图片

说明：ECharts使用 1.用script标签引入echarts的js文件（一个纯Javacript的图表库）。技术分享图片

技术分享图片

2.在绘图前为ECharts准备一个具备高宽的DOM容器。

3.通过echarts.init()方法初始化一个ecahrts实例，并定义Object类型的图表数据结构参数option，通过实例化方法setOption(Object option,{boolean = true} notMerge)生成所需要的图表。技术分享图片

技术分享图片

实例：将mysql数据库中的方式通过echarts可视化说明：通过往文本输入框中输入一个属于四川省的地名（根据数据库中情况），点击button后绘图（取出数据库中该地方每月15号12时的温度绘制折线图）。

显示效果：

技术分享图片

数据库部分截图：

技术分享图片

技术分享图片

项目整体结构：

技术分享图片

代码：EChartsLine.jsp 技术分享图片

技术分享图片

View Code

tempBean.java （实体类）

技术分享图片

View Code

tempDao.java （数据库操作）

技术分享图片

View Code

tempServlet.java （处于控制层Controller，负责处理用户发送的请求）

技术分享图片

View Code

web.xml （配置Servlet）

技术分享图片

附：ECharts配置项详细说明技术分享图片

技术分享图片

View Code

?ECharts中BasicLine图+将mysql数据库中的方式通过echarts可视化

标签：normal 点击 class ack option control 数据库 hide font

人气教程排行