支付宝小程序怎么使用echarts-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

支付宝小程序怎么使用echarts

1132004764853175 2019-07-29 21:17:48 915

支付宝小程序怎么使用echarts 该怎么引入 直接引入报错

分享到
取消 提交回答
全部回答(1)
  • 被纵养的懒猫
    2019-09-24 17:51:16

    <script src="~/Scripts/NewEcharts/echarts.js"></script> <script type="text/javascript"> var myChart; $(function () { load(); }); function load() { require.config({ paths: { //echarts: '../Scripts/Echartsjs' echarts: '../Scripts/NewEcharts' } }); require( [ 'echarts', 'echarts/chart/bar' //'echarts/chart/line' //'echarts/chart/map' ], DrawEchart ); } function DrawEchart(ec) { //--- 折柱 --- myChart = ec.init(document.getElementById('EchartsDiv')); //图表显示提示信息 myChart.showLoading({ text: "图表数据正在努力加载..." }); //定义图表 var option = { tooltip: { trigger: 'axis' }, //color: '#66B3FF', animation: false, addDataAnimation: false, calculable: true, xAxis: [ { type: 'value', boundaryGap: [0, 0.01] } ], yAxis: [ { splitLine: { show: false },//分隔线 //splitArea: { show: false },//分隔区域 type: 'category', // data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'] data:[] } ], series: [ { name: '资源使用情况', color: '#66B3FF ', type: 'bar', // data: [18203, 23489, 29034, 104970, 131744, 630230] data:[] } ] }; //通过Ajax获取数据 $.ajax({ type: "post", async: false, //同步执行 url: "/Report/GetVMUsedInfo", dataType: "json", //返回数据形式为json data: {rnd:Math.random()}, success: function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 option.yAxis[0].data = result.yAxis; option.series[0].data = result.series; myChart.hideLoading(); myChart.setOption(option); } }, error: function(errorMsg) { alert("图表请求数据失败啦!"); } }); //myChart.hideLoading(); //myChart.setOption(option); } </script> 返回用的是 json数据; 后台使用的Asp.net MVC,使用了匿名类(主要是为了方便), var newObj = new { yAxis =result.Data.DanweiList, series= result.Data.ApplyVMEventList }; return Json(newObj, JsonRequestBehavior.AllowGet);

    答案来源于网络

    0 2
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章