百度ECharts图表展示动态数据

最新推荐文章于 2024-07-08 09:16:39 发布

wl_Honest

最新推荐文章于 2024-07-08 09:16:39 发布

阅读量4.4k

点赞数

分类专栏： ajax jQuery

本文链接：https://blog.csdn.net/wl_Honest/article/details/81946779

版权

本文介绍了如何利用百度ECharts展示动态数据，通过引入echarts.min.js，结合后台传递的数据，创建柱状图以直观显示数据。示例以水果销量为例，详细讲解了前端页面与后台数据交互的过程，特别强调了在ajax请求中设置async: false的重要性，以确保数据正确加载到图表中。

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

百度ECharts是个非常强大的图表工具，引入百度提供的echarts.min.js文件后，只需从后台获取数据便可以图表的形式展示数据，能够更直观的查看、比较、统计数据。

这里以一个柱状图展示动态数据的小例子讲解如何使用百度ECharts。

1.首先引入需要的js文件：

    <!-- jquery -->
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <!-- 百度ECharts -->
	<script src="<%=basePath%>js/echarts.min.js"></script>

echarts.min.js自行去百度下载

2.创建columnChart.jsp，（这里可以直接去百度ECharts下载，有各式各样的柱状图）：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>柱状图</title>
    <c:import url="resources.jsp"></c:import>
  </head>
  
  <body>
  	<!--为Echarts准备一个Div放置图表-->
    <div id="main" style="width:600px;height:400px;"></div>
  </body>
  <script type="text/javascript">
  	$(function () {
			//将echart初始化到div中
            var myChart=echarts.init(document.getElementById("main"));
            var dataAxis = [];
            var data = [];
            var yMax = 500;//y轴最大值
            var dataShadow = [];
            
            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }

            var option = {
                title: {
                    text: '特性示例：渐变色 阴影 点击缩放',
                    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false