echarts在miniUI和ajax下动态渲染数据
Posted krank
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts在miniUI和ajax下动态渲染数据相关的知识,希望对你有一定的参考价值。
<script src="echarts.js"></script> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div id="traceProvinceOrder" style="width: 100%;height:400px;"></div> <script> function loadOneColumn() { var myChart = echarts.init(document.getElementById(\'traceProvinceOrder\')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: \'月销售分析\' }, tooltip: {}, legend: { data: [\'销售分析\'] }, xAxis: { data: [] }, yAxis: { splitLine: { show: false },//去除网格线 name: \'\' }, series: [{ barWidth: "30px", name: \'销售分析\', type: \'bar\', itemStyle: { normal: { label: { show: true, position: \'top\', textStyle: { color: \'#333\' } } } }, //data: [] }] }); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names = []; //类别数组(实际用来盛放X轴坐标值) var nums = []; //销量数组(实际用来盛放Y坐标值) $.ajax({ type: \'get\', url: \'${base}/scripts/json.txt\',//请求数据的地址 //url: \'${base}/bd/bd_branch_info!getAllBranch.action\',//请求数据的地址 dataType: "json", //返回数据形式为json success: function (result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 $.each(result.list, function (index, item) { names.push(item.department); //挨个取出类别并填入类别数组 nums.push(item.num); //挨个取出销量并填入销量数组 }); myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 xAxis: { data: names }, series: [{ // 根据名字对应到相应的系列 name: \'发布排行\', //显示在上部的标题 data: nums }] }); }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }); }; loadOneColumn(); </script>
以上是用ajax请求数据进行动态渲染,数据返回格式为json:
{ "list":[ { "department":"和平区", "num":480 }, { "department":"河西区", "num":380 }, { "department":"河东区", "num":366 }, { "department":"河北区", "num":320 }, { "department":"南开区", "num":300 } ] }
——————————————————分割线—————————————————分割线——————————————————————————————-————
miniUI下的echarts
因为这个项目里,所有引入文件都被写在header文件里了,在ftl文件引入无效,所有要找到控制header的文件,在里面改动,然后引入
html.append("\\n<script type=\\"text/javascript\\" src=\\"").append(base).append("/scripts/echarts.js\\"></script>");
function search(){ var data; var year = date.getText() if (year==""){ mini.alert("请选择时间") return } grid.load({ //这里用miniUI提供的查询方法直接就可以查到值, 可以省去发送ajax的步骤,所以直接从官网搜来echarts的基本使用样例 year:year, branch:mini.get("branchNo").getValue(), branchArea:mini.get("branchArea").getValue() },function(){ //要取到后台返回来的值 只能用这个写法, 且上一歌{}内是发送过去的,这里的是返回来的 data = grid.getData(); //取到data console.log(data[0].sumSaleAmt9); //引入echarts var myChart = echarts.init(document.getElementById(\'traceProvinceOrder\')); //console.log(myChart) var option = { title: { text: \'月销售报表\' }, tooltip: {}, legend: { data:[\'销量\'] }, xAxis: { //这里是写死了x轴的数量 data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] }, yAxis: {}, series: [{ //从返回来的数据中取到sumSaleAmt这个值,代表了从1-12个月的销售额 name: \'销量\', type: \'bar\', data: [data[0].sumSaleAmt1,data[0].sumSaleAmt2,data[0].sumSaleAmt3,data[0].sumSaleAmt4,data[0].sumSaleAmt5,data[0].sumSaleAmt6,data[0].sumSaleAmt7,data[0].sumSaleAmt8,data[0].sumSaleAmt9,data[0].sumSaleAmt10,data[0].sumSaleAmt11,data[0].sumSaleAmt12] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }) }
以上是关于echarts在miniUI和ajax下动态渲染数据的主要内容,如果未能解决你的问题,请参考以下文章
jquery miniui新增表单时,某一项值是动态增加的怎么实现
java和python结合项目,实现ajax+echarts显示端口占用数监控