用Echarts编写柱形图、折线图转换（数据从后台获取）

最新推荐文章于 2024-11-24 22:55:06 发布

原创

最新推荐文章于 2024-11-24 22:55:06 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #java

本文介绍了Echarts作为JavaScript图表库的特性，并提供了轻松上手的步骤，包括如何引入Echarts库、创建绘图容器以及生成柱状图的实例代码。强调了数据格式的重要性，提示在接收后台数据后需要将其转换为Echarts所需的格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Echarts特性介绍

Echarts是一个纯JavaScript图标库，可以流畅的运行在PC和移动设备上，兼容大部分浏览器（IE/8/9/10/11、Firefox、Chrome等），底层依赖轻量级的Canvas类库ZRender ，提供直观、生动、可高度个性化定制的数据可视化图表。

二、Echarts轻松上手

1、Echarts只需像普通的JavaScript库一样用script引入

2 、在绘图前需要为Echarts准备一个具备高宽的DOM容器

3、再则通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图。

完整代码如下：

<div id="main" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        
         <script type="text/javascript">
         function year(){
         	var ctx = "${pageContext.request.contextPath}";
         	var da = [];
         	var nums = [];
                //这里是根据下拉框的内容进行柱形数