页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程

最新推荐文章于 2024-10-18 10:28:46 发布

孙天任

最新推荐文章于 2024-10-18 10:28:46 发布

阅读量913

点赞数

文章标签：页面引入多个echarts

本文链接：https://blog.csdn.net/weixin_36028876/article/details/112628414

版权

本文档详细介绍了如何在JavaWeb项目中使用Echarts进行数据统计图表的开发，包括Echarts的下载、引入、入门案例，以及如何与服务器进行数据交互，涉及到项目结构、所需jar包及关键类的实现。

摘要由CSDN通过智能技术生成

一、什么是Echarts？

ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

二、Echarts的下载

Echarts官网下载地址： https:// echarts.apache.org/zh/i ndex.html

三、Echarts的开发步骤

3.1 Echarts的引入

将Echarts引入到项目中，其实官方就给了解释。可以点击5分钟上手Echarts进入。这里通过标签引入打包下载好的Echarts。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

3.2 Echarts入门案例步骤

引入Echarts文件
为 ECharts 准备一个具备高宽的DOM容器
初始化一个echarts实例
指定你所需要图的配置项和数据
通过 setOption 方法生成一个简单的柱状图

<%--
  Created by IntelliJ IDEA.
  User: Ziph
  Date: 2020/5/19
  Time: 13:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>echarts入门</title>
    <%--1.引入echarts.js--%>
    <script src="echarts/echarts.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
    
            /*3.初始化echarts容器*/
            var eCharts = echarts.init(document.getElementById("main"));
            /*4.设定echarts属性*/
            eCharts.setOption({
    
                title: {
    
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
    
                    data: ['销量']
                },
                xAxis: {
    
                    data: ["衬衫", "羊毛衫", "雪纺衫&#