求一个Ext整合echarts示例

求一个Ext整合echarts示例,将echarts图标如何显示在extjs的panel对象中。

0

2个回答

 <!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>
1




Ext中整合echarts示例
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] } ] }) } } } }); })




0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Ext和SSH整合示例
Ext和SSH的整合示例,正在纠结该如何将两种技术结合在一起的童鞋们可以来参考一下
echarts示例
最近在研究数据可视化的板块,echarts是一款非常方便,简单容易上手的Js
ECharts示例
ECharts示例
Ext 2.0下Jquery的整合使用示例
&lt;!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;METAhttp-equiv="Content-Type"content="text/html;charse...
echarts地图的一个示例byxiao
echarts地图的一个示例,一个新疆的地图,每个市用线分隔
一个Echarts绘制世界地图的示例
一个Echart官网示例中世界地图的例子: 1.首先要去官网http://echarts.baidu.com点击打开链接下载Echarts.js 2.具体代码 Document var myChart = echarts.init(document.getElementById('main')); option = { title: {
ext示例
ExtJS function showDialog(){ Ext.MessageBox.alert(&quot;hello&quot;,&quot;Hello World!!!&quot;); } function showForm(){ var win=new Ext.Window({ ...
Ext源码 一个portal的示例
下载 转载于:https://www.cnblogs.com/meetrice/archive/2008/06/17/1223423.html
求一个ext的问题
我用viewport进行布局,将页面分成了三分,我想实现弹出的window窗口在整个viewport上显示 而不是在viewport的一个子面板上显示 可以实现吗 ? 跪求答案,在线等rn
求一个Ext的后台框架
--------------------------------------rn| |rn--------------------------------------rn| | |rn| | |rn| | |rn| | |rn| | |rn| | |rn| | |rn| | |rn| | |rn| | |rn| | |rn--------------------------------------rnrn大概就这种布局,左边是菜单,右边内容。rnrn只要一个页面. 不要一个系统里去找的,刚学Ext, 太多了看不懂。。。rnrn另:谁有好点的学习网站?rnrn
求一个ext的demo
http://www.qwikioffice.com/desktop-demo/rn就是这个网的效果,有demo吗?
求一个ext的页面布局
看到文档上的ext布局很漂亮,想做个。不过按照他上面的也不出来,谁有?
eCharts整合SSM的简单使用
eCharts整合SSM的简单使用。
Echarts地图相关功能整合
Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的,Echarts与Highcharts大致用法差不多,最近用到了Echarts的地图功能,把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js) 先来晒一个效果图吧 下面就来看一下代码如果实现 一、...
birt和echarts整合
该demo整合echarts和birt,下载后,可将报表文件里面echarts的路径改成你的路径,然后直接运行就能看到效果
Extjs4整合echarts问题
extjs4整合echarts遇到了几个问题,需要在这里请教下。rn1.calculable设为false,理论上应该是图表不可拖拽,我设置后,数据点都不显示了,鼠标移动到有数据的区域内,数据就显示了,移开就又不显示了。(如果数据源固定就可以,我通过ext的Ajax请求就不行)rn2.比如我查询1到10号的数据,然后在查询2号到10号的数据,X轴坐标从2号到10号列出来后,又会重复列出1到10号的数据。rn以下是我的代码,希望各位能够提供下帮助。 rn[code=javascript]rnrnExt.define("xxx.xxx.historyData.HistoryDataCharts", rn extend : "Ext.panel.Panel",rn initComponent : function() rn var me = this;rn var dataType = 0;rn var title = requestParams.title;rn var queryBegin = null;rn var queryEnd = null;rn // var interval = null;rn var myChart;rn var option;rn var drawChart = function(object) rn option = rn title : rn text : title + "趋势图",rn x : 'center'rn ,rn tooltip : rn formatter : function(params, ticket, callback) rn var res = '监测时间 :' + params[0][1];rn for (var i = 0, l = params.length; i < l; i++) rn res += ' ' + params[i][0] + ' : 'rn + params[i][2];rn rn return res;rn ,rn trigger : 'axis'rn ,rn legend : rn data : [],rn y : 40rn ,rn toolbox : rn show : true,rn feature : rn mark : rn show : truern ,rn dataView : rn show : true,rn readOnly : falsern ,rn magicType : rn show : true,rn title : rn line : '折线图',rn bar : '柱形图'rn ,rn type : ['line', 'bar']rn ,rn restore : rn show : truern ,rn saveAsImage : rn show : truern ,rn dataZoom : rn show : truern rn rn ,rn // 是否启用拖拽图表效果rn calculable : false,rn xAxis : [],rn yAxis : [rn type : 'value',rn splitArea : rn show : truern rn ],rn series : []rn ;rn Ext.Ajax.request(rn url : "xxx/xxx/ByCondition",rn method : "POST",rn params : rnrn 'queryBegin' : queryBegin,rn 'queryEnd' : queryEnd,rn 'dataType' : dataType,rn 'isAsc' : 1rn ,rn callback : function(gd, success, resp) rn try rn if (success) rn var rst = Ext.decode(resp.responseText);rn if (rst.success) rn var data = rst.data;rn var categories = data.categories;rn var arr = data.seriesObj;rn Ext.Array.each(arr, function(v) rn var name = v["name"];rn var lines = v["data"];rn option.legend.datarn .push(name);rn option.series.push(rn name : name,rn type : 'line',rn smooth : true,rn data : linesrn );rn );rn option.xAxis.push(rn type : 'category',rn splitLine : false,rn axisLabel : rn interval : 40,rn margin : 2,rn rotate : 30rn ,rn data : categoriesrn );rn myChart.setOption(option);rn return;rn rn rn Ext.tools.tips("获取数据失败!");rn catch (e) rn Ext.tools.tips("获取数据失败:" + e);rn rn rn rn );rn rn Ext.apply(me, rn html : [' '],rn loadRtData : function(object) rn queryBegin = object.queryBegin;rn queryEnd = object.queryEnd;rn dataType = object.dataType;rn drawChart();rn rn );rn me.on("render", function() rn require(['echarts', 'echarts/chart/bar',rn 'echarts/chart/line'], function(ec) rn myChart = ec.init(documentrn .getElementById('main'));rn );rn );rn me.callParent();rn rn);rn[/code]
Extjs4.2整合Echarts组件
我平时大多使用Extjs来进行后台页面展示,但是最近被Echarts的华丽效果所佩服,因此产生了将平时习惯使用的Extjs整合Echarts来达到更好的效果. 这个是自定义了Extjs的组件,然后可以在controller里面使用Ajax请求将option传入实例化的组件中,实现由Extjs控制数据的传入,Echarys进行展示. 对于应用此组件需要掌握Extjs的前后台传值,并且熟悉Echarts的官方Demo,然后才可以将此组件应用至项目中.
echarts和百度地图整合
echarts和百度地图整合,花了好久才搞出来,有问题email我,1126280688@qq.com
Java birt和echarts整合
Java birt和echarts整合。 该demo整合echarts和birt,下载后,可将报表文件里面echarts的路径改成你的路径,然后直接运行就能看到效果 birt echarts
ext 实例 示例 实例 示例
ext 实例 示例 实例 示例 ext 实例 示例 实例 示例
百度Echarts示例-echarts-demo
百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap
Echarts几个使用示例
Echarts几个使用示例,可供参考
Echarts入门示例
一个简单的Echarts入门示例,需要下载请移步至 http://echarts.baidu.com/index.html 来自官网的例子: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Echarts入门示例&lt;/tit...
Echarts地图使用示例
首先引用js到页面中: &lt;script type="text/javascript" src="echarts.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="china.js"&gt;&lt;/script&gt;china.js请从http://echarts.baidu.com/downloa...
Echarts示例总结
Echarts示例总结 以下示例仅为图形填充过程的主要示例option代码 示例一 示例1代码: //分街道 饼图 function drawBuilding(ec) { var myChart = ec.init(document.getElementById("building")); option = { title : {
ECharts示例和jar包
ECharts示例和jar包 ,里面有示例,有代码说明,标注很清楚,并且有页面代码。采用ajax的方式实现的。
echarts图 示例
占位图 option = { title: { text: ‘80%’, x: ‘center’, y: ‘center’, textStyle: { fontWeight: ‘normal’, color: ‘#0580f2’, fontSize: ‘90’ } }, color: [‘rgba(176, 212, 251, 1)’], legend: { show: true, itemGap...
前端:echarts使用示例
效果: jsp文件部分: &lt;div class="row"&gt; &lt;div class="col-sm-6"&gt; &lt;section class="panel"&gt; &lt;header class="panel-heading"&gt;图表1-饼图&lt;/header&gt; &lt;div class...
可视化Echarts的使用示例
1.照着官方文档简单做两个图表,感受一下。 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;echarts-demo1&lt;/title&gt; 6 &lt;sc...
uni-app echarts所有示例
uni-app echarts所有示例,每个示例均可运行
echarts官方示例
因为项目大小的设置,里面少了一个asset文件夹。这个项目主要是利用E charts绘制图表用的,github上下载太难了,终于找着机会下载上传到csdn上来
Leaflet集成Echarts示例
该资源包括修改后的Echarts 4.2.0 版本的源代码,Leaflet 1.3.4版本源代码,基于Leaflet扩展的代码以及一个散点图demo
echarts的简单示例
echarts的简单实例 第一步:在HTML中设置展示的框架,给一个空的div(id=“echarts-purchase-chart”)放图表 &lt;div class="col-lg-12"&gt; &lt;div class="ibox float-e-margins"&gt; &lt;div class...
echarts图表示例教程
echarts图表示例教程
echarts入门示例
echarts插件常用的柱状图,饼状图,ajax数据类型的柱状图,饼状图,多属性柱状图
echarts使用示例
1.echarts本地运行项目 2.echarts使用示例
百度ECharts使用示例
如果你还在使用JFrechart那你out了,百度ECharts简单到没有朋友,还有做的图表比较炫酷,废话不说,直接撸代码找规律,超级简单!!!!
pyqt、echarts示例
pyqt、echarts示例源码。
echarts动态关系图示例
echarts动态加载关系图示例,三层结构,中心关系子层,子层再次关系子层。
求一个示例
新学.net,想求一个最基础的示例rn包括数据连接(最好oracle)、xml、datagrid、水晶报表rn最好包含常用数据操作控件的源程序rn谢谢rnrn如果哪位有,愿意的话发到我的邮箱rnfipamw@sina.comrn总共只有这么多分,分数少了点,不好意思
相关热词 c# gdi 占用内存 c#中遍历字典 c#控制台模拟dos c# 斜率 最小二乘法 c#进程延迟 c# mysql完整项目 c# grid 总行数 c# web浏览器插件 c# xml 生成xsd c# 操作sql视图