下载百度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;
最终效果:
扫描二维码关注公众号,回复:
403260 查看本文章