Echarts异步使用ajax 加载数据

痛定思痛。 2024-04-17 06:26 111阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDI2NzQxNQ_size_16_color_FFFFFF_t_70][]

最近搞Echarts图 来记录一下 使用方式。

#### 以饼状图 为例，其他图形都是一样的。 ####

var myChart3 = echarts.init(document.getElementById('main3'));  
option3 = \{  
title : \{  
text: '',  
subtext: '',  
x:'left'  
\},  
tooltip : \{  
trigger: 'item',  
formatter: "\{a\} <br/>\{b\} : \{c\} (\{d\}%)"  
\},  
legend: \{  
type: 'scroll',  
orient: 'vertical',  
left: 10,  
top: 40,  
bottom: 20,  
data: (function()\{  
var arrY=\[\];  
$.ajax(  
\{  
url:"area.do?findPlatformNameV",  
dataType:"json",  
async: false,  
success:function(d)  
\{  
arrY=eval(d.obj);

\}  
\});

return arrY;  
\})(),  
\},  
series : \[  
\{  
name: '访问来源',  
type: 'pie',  
radius : '55%',  
center: \['50%', '60%'\],  
data:(function()\{  
var arrY=\[\];  
$.ajax(  
\{  
url:"area.do?findPlotFormCount",  
dataType:"json",  
async: false,  
success:function(d)  
\{  
var rows=eval(d.obj);  
//调用函数获取值，转换成数组模式  
for(var i=0;i<rows.length;i++)  
\{  
arrY.push(rows\[i\]);  
\}  
\}  
\});

return arrY;  
\})(),  
itemStyle: \{  
emphasis: \{  
shadowBlur: 10,  
shadowOffsetX: 0,  
shadowColor: 'rgba(0, 0, 0, 0.5)'  
\}  
\}  
\}  
\]  
\};

myChart3.setOption(option3);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDI2NzQxNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4e099e7d522745cab057ebe93b069506.png

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts异步使用ajax 加载数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

痛定思痛。/ 2024年04月17日 06:26/ 0 赞/ 112 阅读

相关 echarts异步数据的加载与动态更新

方法一 var myChart = echarts.init(document.getElementById('main')); $.get('

比眉伴天荒/ 2023年09月29日 16:16/ 0 赞/ 52 阅读

相关 Ajax与jQuery异步加载数据

本文共1096个字，预计阅读时间需要4分钟。简介一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占

亦凉/ 2023年07月13日 03:57/ 0 赞/ 26 阅读

相关 ECharts异步加载数据

前言现在做报表的工具和产品很多。之前用过美林数据的 ‘Tempo BI’，一款需要付费的产品，功能还是很强大的。最近，朋友需要做一个简单的报表Demo，想让我帮忙实现。

痛定思痛。/ 2023年06月16日 14:58/ 0 赞/ 152 阅读

相关 jquery ajax 加载数据的时候异步显示加载动画

http://blog.csdn.net/szstephenzhou/article/details/39318415 ajax加载后台数据就不说的那么细了。看下面

悠悠/ 2022年08月20日 13:23/ 0 赞/ 248 阅读

相关 echarts异步加载

法1：加载完数据后，设置图表样式。 var myChart = echarts.init(document.getElementById('main'));

青旅半醒/ 2022年05月26日 01:43/ 0 赞/ 253 阅读

相关 SpringBoot 2.x 学习笔记（5）：ECharts+AJAX实现异步数据加载

1、JavaBean package cn.hadron.eba.bean; import java.io.Serializable;

一时失言乱红尘/ 2022年04月17日 06:56/ 0 赞/ 244 阅读

相关 Echarts 图表数据通过 Ajax 动态加载

一、介绍 Echarts 配合使用 Ajax 进行数据的动态加载，主要解决了加载一次页面只能加载一次图表的问题，其次在动态加载时衔接合理。二、HTML代码

╰+哭是因爲堅強的太久メ/ 2022年03月26日 06:55/ 0 赞/ 703 阅读

相关 Echarts通过Ajax实现动态数据加载

Echarts通过Ajax实现动态数据加载用jquery的ajax来异步加载echarts图表数据，下面已一个简单的饼状图为例： ------------------

忘是亡心i/ 2022年02月14日 08:35/ 0 赞/ 339 阅读

相关 Java Echarts 实用小例子(Ajax异步加载)

实际echarts中，数据都是从数据库中动态获取过来。所以这里来简单演示一下echarts怎么通过ajax异步获取数据库中的数据在页面上进行动态展示。下面只是功能代码展示，具体

蔚落/ 2022年01月27日 09:45/ 0 赞/ 463 阅读