Echart4 使用dataset 异步加载数据失败,上贴求助了
ashx传过来的值
{
"source":
[
["product","2015","2016","2017"],
["Matcha Latte","43.3","85.8","93.7"],
["Milk Tea","83.1","73.4","55.1"],
["Cheese Cocoa","86.4","65.2","82.5"],
["Walnut Brownie","72.4","53.9","39.1"],
["Matcha Latte","43.3","85.8","93.7"]
]
}
JS 脚本
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="echarts.js"></script>
</head>
<body>
<form id="form1" runat="server">
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 1, 1, 1],
['Milk Tea', 1, 1, 1],
['Cheese Cocoa', 1, 1, 1],
['Walnut Brownie', 1, 1, 1]
]
},
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴,数值轴。
yAxis: {},
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [
{ type: 'bar' },
{ type: 'bar' },
{ type: 'bar' }
]
});
$.ajax({
type: "post",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "Handler.ashx", //请求发送到TestServlet处
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
legend: {},
tooltip: {},
dataset: result,
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴,数值轴。
yAxis: {},
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [
{ type: 'bar' },
{ type: 'bar' },
{ type: 'bar' }
]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
</form>
</body>
</html>
相关推荐
uni-微信小程序使用lime-echart[项目源码]
配置项中特别强调dataset、encode、dimensions等数据映射机制的正确设置,确保多维数据源与视觉通道精准绑定。
百度Echarts饼状图
##### 2.2 使用AJAX获取数据前端页面中通过AJAX调用后端接口来获取数据,具体实现如下:```javascriptfunction fuzhi(MyGoods) { $.ajax({ url
技术转移机构如何基于数据提升项目撮合精准度?.docx
技术转移机构如何基于数据提升项目撮合精准度?
超扭滑模与快速终端滑模的永磁同步电机无感控制:理论、离散化实现与仿真研究(Simulink仿真实现)
内容概要:本文系统研究了超扭滑模控制(STSMC)与快速终端滑模控制(FTSMC)在永磁同步电机(PMSM)无感控制中的应用,重点涵盖其理论基础、离散化实现方法及Simulink仿真验证。文章深入阐述了两种高阶滑模控制策略的设计原理,利用磁链无感观测技术实现转子位置与速度的精确估计,从而省去物理传感器,有效提升了系统的可靠性与鲁棒性。同时,提供了完整的Simulink仿真模型构建方案,包括控制器设计、关键参数整定及动态响应性能分析,充分验证了所提出的方法在零速与低速工况下的卓越控制性能和有效性。; 适合人群:具备电机控制、现代控制理论基础知识及熟练掌握MATLAB/Simulink仿真技能的研究生、科研人员与工程技术人员。; 使用场景及目标:①深入理解高阶滑模控制在电机驱动系统中的设计思想与具体实现;②掌握基于滑模观测器的无感控制核心技术;③开展永磁同步电机高性能控制算法的理论研究、仿真验证与工程化探索。; 阅读建议:建议将文中详尽的理论推导与Simulink仿真模型相结合进行学习,重点关注滑模面的构建、抖振抑制策略的实施以及离散化处理的细节,有条件的研究者可进一步将算法移植到DSP等硬件平台进行实验验证,以深化对理论的理解并检验其实际应用效果。
多源动态最优潮流的分布鲁棒优化方法(IEEE118节点)(Matlab代码实现)
内容概要:本文系统阐述了基于Matlab的多源动态最优潮流分布鲁棒优化方法,聚焦于IEEE118节点电力系统,旨在应对高比例可再生能源接入背景下源荷双重不确定性所带来的调度挑战。该方法深度融合分布鲁棒优化理论,通过构建能够抵御最坏情况概率分布的决策模型,有效提升了电力系统在复杂不确定性环境下的运行安全性、经济性与可靠性。研究不仅提供了完整的Matlab代码实现,便于结果复现与算法验证,还特别关注了含风电等新能源的现代电网低碳调度问题,为解决实际工程中的优化调度难题提供了强有力的理论支撑和技术工具。; 适合人群:具备电力系统分析基础和Matlab编程能力的研究生、科研人员及从事智能电网优化运行、能源系统规划等相关领域的工程技术人员。; 使用场景及目标:①研究含高比例可再生能源接入的电力系统动态最优潮流问题;②掌握分布鲁棒优化在电力系统经济调度、低碳调度中的建模思想与求解方法;③利用IEEE118标准测试系统进行算法有效性验证与性能对比分析;④基于所提供的Matlab代码进行二次开发,探索新型不确定性优化理论在电力系统中的创新应用。; 阅读建议:建议读者结合电力系统最优潮流、不确定性优化理论(特别是分布鲁棒优化)的背景知识进行学习,重点关注模型的构建逻辑、目标函数与约束条件的设计原理,以及Matlab代码的具体实现细节。在学习过程中,应动手调试代码,尝试修改系统参数(如新能源出力波动范围、负荷水平等),以观察不同场景下优化结果的变化,从而深刻理解该方法的适应性、优势及其潜在的局限性。


