百度ECharts图表展示动态数据

本文介绍了如何利用百度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
  
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值