下载百度echart:https://codeload.github.com/ecomfe/echarts/zip/2.2.6
解压将 echarts-2.2.6/build/dist/echarts-all.js 拷贝到 sencha touch项目根目录
修改 app.json 文件,将echarts-all.js引入 sencha项目中
这样就集成好了。在项目里可以先创建html标签来放入echart要绘制的id。
html:"<div id="echart" style="width:100%;height:250px;"></div>"
在页面初始化完成后调用echart绘图方法。
var myChart = echarts.init(document.getElementById('echart')); var option = { tooltip : { trigger: 'axis' }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType: {show: true, type: ['line']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, legend: { data:['投资数','投资金额'] }, xAxis : [ { type : 'category', data : ['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015'] } ], yAxis : [ { type : 'value', name : '投资数' }, { type : 'value', name : '投资金额' } ], series : [ { name:'投资数', type:'line', data:[2, 28, 30, 23, 18, 50, 64,27,55,143,51] }, { name:'投资金额', type:'line', yAxisIndex: 1, data:[87.32, 791.92, 665.61, 1122.64, 1307.27, 1888.82, 3629.25,1197.16,2919.29,3614.21,1146.22], } ] }; // 为echarts对象加载数据 myChart.setOption(option); window.onresize = myChart.resize;
最终效果:
相关推荐
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
Sencha Touch开发的项目《般若人生》源码
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
sencha touch 折叠list
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch 2.4.0最新版 原版包下载
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
sencha touch cookbook 英文高清文字版 !
sencha touch list demo
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch动态加载组件及容器内容,防止加载时间过长的问题
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助
sencha touch grid
sencha touch2移动开发框架,ajax获取数据
《Sencha Touch 权威指南》陆凌牛著的源码包
讲其解压到Tomcat的webAPP目录下,即可访问
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助