???<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下动态渲染数据
原文地址：https://www.cnblogs.com/code-klaus/p/8566339.html