正文
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); })
}
