JAVAEE细细看框架24 - ECharts 折线图

最新推荐文章于 2023-06-13 16:56:18 发布

原创

最新推荐文章于 2023-06-13 16:56:18 发布 · 690 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #可视化

本文详细介绍如何使用ECharts绘制折线图，包括环境搭建、数据动态加载及展示会员数量随时间变化的趋势。

ECharts

ECharts缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的使用JavaScript实现的数据可视化工具，

官网：https://echarts.baidu.com/
下载地址：https://echarts.baidu.com/download.html

// 使用
echarts.min.js

下载完成可以得到如下文件：
解压zip文件，我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了

1. 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="main" style="height: 600px;width: 400px;">
			
		</div>
		<script type="text/javascript">
			var mycharts = echarts.init(document.getElementById('main'))
			// 指定图表的配置项和数据
			        var option = {
    
    
			            title: {
    
    
			                text: 'ECharts 入门示例'
			            },
			            tooltip: {
    
    },
			            legend: {
    
    
			                data:['销量']
			            },
			            xAxis: {
    
    
			                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			            },
			            yAxis: {
    
    },
			            series: [{
    
    
			                name: '销量',
			                type: 'bar',
			                data: [5, 20, 36, 10, 10, 20]
			            }]
			        };
			
			        // 使用刚指定的配置项和数据显示图表。
			        mycharts.setOption(option);

		</script>
	</body>
</html>

1.引入echarts.js文件

2.编写一个div用于echarts展示

3.生成echarts对象，并且传入我们的div的dom元素

4.指定图标的配置项和数据

5.使用刚指定的配置项和数据显示图表

echarts教程：

https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

2. 官方实例

ECharts提供了很多官方实例，我们可以通过这些官方实例来查看展示效果和使用方法。
官方实例地址：https://www.echartsjs.com/examples/

在实际应用中，数据往往存储在数据库中，所以可以发送ajax请求获取
数据库中的数据并转为图表所需的数据即可。

3. 折线图

通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年
时间内每个月的会员总数据量。

需要统计在每个月用户数量是多少

4. 页面调整

第一步：将echarts.js文件复制到health_backend工程的plugins目录下

第二步：在report_member.html页面引入echarts.js文件

<script src="../plugins/echarts/echarts.js"></script>

页面代码：

<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv</

最低0.47元/天解锁文章