求一个Ext整合echarts示例

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

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>




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] } ] }) } } } }); })




Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Ext和SSH整合示例
Ext和SSH的整合示例,正在纠结该如何将两种技术结合在一起的童鞋们可以来参考一下
echarts示例
echarts使用示例,简单、易懂、易学习 echarts使用示例,简单、易懂、易学习
ECharts示例
ECharts示例
echarts地图的一个示例byxiao
echarts地图的一个示例,一个新疆的地图,每个市用线分隔
一个Echarts绘制世界地图的示例
一个Echart官网示例中世界地图的例子: 1.首先要去官网http://echarts.baidu.com点击打开链接下载Echarts.js 2.具体代码 Document var myChart = echarts.init(document.getElementById('main')); option = { title: {
ext 实例 示例 实例 示例
ext 实例 示例 实例 示例 ext 实例 示例 实例 示例
求一个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示例和jar包
ECharts示例和jar包 ,里面有示例,有代码说明,标注很清楚,并且有页面代码。采用ajax的方式实现的。
Echarts示例总结
Echarts示例总结 以下示例仅为图形填充过程的主要示例option代码 示例一 示例1代码: //分街道 饼图 function drawBuilding(ec) { var myChart = ec.init(document.getElementById("building")); option = { title : {
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...
uni-app echarts所有示例
uni-app echarts所有示例,每个示例均可运行
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官方示例
因为项目大小的设置,里面少了一个asset文件夹。这个项目主要是利用E charts绘制图表用的,github上下载太难了,终于找着机会下载上传到csdn上来
Leaflet集成Echarts示例
该资源包括修改后的Echarts 4.2.0 版本的源代码,Leaflet 1.3.4版本源代码,基于Leaflet扩展的代码以及一个散点图demo
echarts图表示例教程
echarts图表示例教程
Echarts几个使用示例
Echarts几个使用示例,可供参考
百度Echarts示例-echarts-demo
百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap
echarts使用示例
1.echarts本地运行项目 2.echarts使用示例
echarts入门示例
echarts插件常用的柱状图,饼状图,ajax数据类型的柱状图,饼状图,多属性柱状图
Echarts地图相关功能整合
Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的,Echarts与Highcharts大致用法差不多,最近用到了Echarts的地图功能,把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js)
pyqt、echarts示例
pyqt、echarts示例源码。
echarts动态关系图示例
echarts动态加载关系图示例,三层结构,中心关系子层,子层再次关系子层。
前端:echarts使用示例
效果: jsp文件部分: &amp;amp;amp;lt;div class=&amp;amp;quot;row&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;col-sm-6&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;section class=&amp;amp;quot;panel&amp;amp;quot;&amp;amp;amp;gt; &amp
eCharts整合SSM的简单使用
eCharts整合SSM的简单使用。
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]
Java birt和echarts整合
Java birt和echarts整合。 该demo整合echarts和birt,下载后,可将报表文件里面echarts的路径改成你的路径,然后直接运行就能看到效果 birt echarts
Extjs4.2整合Echarts组件
我平时大多使用Extjs来进行后台页面展示,但是最近被Echarts的华丽效果所佩服,因此产生了将平时习惯使用的Extjs整合Echarts来达到更好的效果. 这个是自定义了Extjs的组件,然后可以在controller里面使用Ajax请求将option传入实例化的组件中,实现由Extjs控制数据的传入,Echarys进行展示. 对于应用此组件需要掌握Extjs的前后台传值,并且熟悉Echarts的官方Demo,然后才可以将此组件应用至项目中.
echarts和百度地图整合
echarts和百度地图整合,花了好久才搞出来,有问题email我,1126280688@qq.com
EXT经典示例大全
1.入门 2.ext事件处理 3.面板 4.工具栏 5.Viewport 6.窗口 7.对话框 内附:ext语法总结.txt
ext基础布局示例
刚接触ext 自己做的一些布局方面的例子与大家分享 虽然很简单 希望对大家有帮助
Ext自动装配示例
博文源码文件 http://blog.csdn.net/lijun7788/article/details/6970465
百度echarts与百度地图轨迹整合示例--突出显示伴随功能
主要功能点 1.单个轨迹按照下方时间轴的顺序,依次播放显示 2.可以拖动下方时间轴进行拖动播放 3.多目标的同时运行显示,进行多目标的伴随效果,比如说,一个地点两个目标依次是11:00,11:01获取到的坐标信息, 则可以计算为伴随经过此地点。 4.最重要的有一点,echarts有轨迹运行时的bug,就像是目标和伴随在经过几个时间点的运行后,会有残影, 此项目用一些特殊办法进行了规避,具体如何...
Ext Form 示例
Ext Form 简单示例Ext Form 简单示例Ext Form 简单示例Ext Form 简单示例Ext Form 简单示例Ext Form 简单示例,
ext gantt-2.2 demo 示例
需要下载gantt2.2才能运行 ext 甘特图示例 特别适合新手学习使用
Ext基础入门示例
Ext基础入门实例 适合新手入门 可以生成可编辑表格 数据统计图 随意变换主题 界面简洁大方
ext简单示例
ext简单示例,实用,易懂,对于初学者横有用,希望能给你帮助
相关热词 c#检测非法字符 c#双屏截图 c#中怎么关闭线程 c# 显示服务器上的图片 api嵌入窗口 c# c# 控制网页 c# encrypt c#微信网页版登录 c# login 居中 c# 考试软件