ExtJS整合Echarts实现图表分析

ExtJS整合Echarts实例

流程:ExtJS通过AJAX请求到后台,后台组装数据并返回,在view层将返回的数据填入echarts相应的data中,就可以显示了。

Demo1:柱状图bar

查阅Echarts官网例子可得一下代码

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

效果图

很明显,只需要将后台传输过来的值替换进去就可以了。

通过Ajax请求的success得到返回值,使用s = JSON.parse(text)方法转换格式,之后,通过me.option.series[size].data = s进行赋值,即可显示需要的数据图了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是ExtJS整合Echarts实现柱状图,并实现柱状图点击事件的示例代码: ```javascript // 定义ExtJS的store var store = Ext.create('Ext.data.Store', { fields: ['name', 'value'], data: [ { name: 'Mon', value: 120 }, { name: 'Tue', value: 200 }, { name: 'Wed', value: 150 }, { name: 'Thu', value: 80 }, { name: 'Fri', value: 70 }, { name: 'Sat', value: 110 }, { name: 'Sun', value: 130 } ] }); // 定义Echarts的option var option = { xAxis: { type: 'category', data: store.collect('name') }, yAxis: { type: 'value' }, series: [{ data: store.collect('value'), type: 'bar' }] }; // 定义ExtJS的panel var panel = Ext.create('Ext.panel.Panel', { width: 600, height: 400, renderTo: Ext.getBody(), layout: 'fit', items: [{ xtype: 'chart', store: store, axes: [{ type: 'numeric', position: 'left', fields: ['value'], title: { text: 'Value', fontSize: 15 }, grid: true }, { type: 'category', position: 'bottom', fields: ['name'], title: { text: 'Name', fontSize: 15 } }], series: [{ type: 'bar', xField: 'name', yField: 'value', listeners: { itemclick: function(series, item, event) { // 点击事件处理 console.log(item.record.get('name') + ': ' + item.record.get('value')); } } }] }], listeners: { afterrender: function() { // 渲染Echarts var chart = this.down('chart'); chart.setOption(option); } } }); ``` 在上述代码中,我们首先定义了一个ExtJS的store,用于存储数据。然后定义了Echarts的option,包括x轴、y轴和series。接着定义了一个ExtJS的panel,包含一个chart组件,用于显示Echarts图表。在chart组件中,我们定义了x轴、y轴和series,并添加了一个itemclick事件监听器,用于处理柱状图的点击事件。最后,在panel的afterrender事件中,我们渲染了Echarts图表

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值