echarts导入mysql数据库_echarts显示数据库数据库里面的信息

该博客介绍了如何将ECharts图表与MySQL数据库集成,通过Ajax异步请求获取数据库中的信息,并在ECharts实例上显示为条形图。示例中展示了同步执行的Ajax调用来填充ECharts的x轴和y轴数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

5

这是主要部分了,直接复制就可以了

// 基于准备好的dom,初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

var option = {

tooltip: {

show: true

},

legend: {

data: ['销量']

},

xAxis: [

{

type: 'category',

data: (function(){

var arr=[];

$.ajax({

type : "post",

async : false, //同步执行

url : "/test_ssh/app/getAllecharts",

data : {},

dataType : "json", //返回数据形式为json

success : function(json) {

if (json) {

for(var i=0;i

console.log(json[i].context);

arr.push(json[i].user.app_name);

}

}

},

error : function(errorMsg) {

alert("不好意思,图表请求数据失败啦!");

myChart.hideLoading();

}

})

return arr;

})()

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

'name': '销量',

'type': 'bar',

'data':(function(){

var arr=[];

$.ajax({

type : "post",

async : false, //同步执行

url : "/test_ssh/app/getAllecharts",

data : {},

dataType : "json", //返回数据形式为json

success : function(json) {

if (json) {

for(var i=0;i

console.log(json[i].context);

arr.push(json[i].user.app_id);

}

}

},

error : function(errorMsg) {

alert("不好意思,图表请求数据失败啦!");

myChart.hideLoading();

}

})

return arr;

})()

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值