Ext整合显示echarts示例
echarts图标如何显示在extjs的panel对象中。
Ext整合显示echarts源代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ext中整合echarts示例</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../ext-all-debug.js"></script> <script src="echarts-2.0.4/doc/asset/js/esl/esl.js"></script> <script type="text/javascript"> var fileLocation = 'echarts-2.0.4/doc/example/www/js/echarts';//注意调整路径 require.config({ paths: { echarts: fileLocation, 'echarts/chart/bar': fileLocation } });; Ext.onReady(function(){ Ext.create('Ext.panel.Panel', { width: 500, height: 300, border: true, renderTo: document.body, listeners: { afterlayout: function (pl, layout, opts) { require(['echarts', 'echarts/chart/bar'], requireCallback); function requireCallback(echarts) { myChart = echarts.init(pl.body.dom, 'macarons'); myChart.setOption({ title: { text: 'Ext中整合echarts示例' }, xAxis: [{ type: 'category', splitLine: { show: false }, data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数'] }], yAxis: [{ type: 'value' }], series: [ { name: '辅助', type: 'bar', stack: '总量', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [0, 1700, 1400, 1200, 300, 0] }, { name: '生活费', type: 'bar', stack: '总量', itemStyle: { normal: { label: { show: true, position: 'inside' } } }, data: [2900, 1200, 300, 200, 900, 300] } ] }) } } } }); }) </script> </head> <body> </body> </html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:Ext整合显示echarts示例