Echarts异步使用ajax 加载数据

痛定思痛。 2024-04-17 06:26 55阅读 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 条评论，55人围观）

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

相关阅读

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

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

相关 ECharts异步加载数据

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

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

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

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

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

相关 vue中引入Echarts异步加载数据更新图表

对于这个问题，刚开始觉得比较简单，但是无法渲染图表后来才发现，我用ajax异步加载数据，当图表渲染的时候，数据还没有拿到，这样没有数据，自然不能渲染图表。找到了一个

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 09:44/ 0 赞/ 302 阅读

相关 echarts异步加载

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

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

相关 ajax 异步加载显示等待效果

原文地址：[https://www.cnblogs.com/zengdingxin/p/5725061.html][https_www.cnblogs.com_zengding

「爱情、让人受尽委屈。」/ 2022年05月12日 00:54/ 0 赞/ 193 阅读

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

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

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

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

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

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

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

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

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

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

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

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