页面显示
<div id="main" style="width: 800px;height:400px;"></div>
JS生成图表
<script type="text/javascript">
$(function(){
$.getJSON("PillarServlet?flag=purchaseChart",{},function(data){
var arr1 = [];
var arr2 = [];
/* var jsonstr= JSON.stringify(data);
var str=JSON.parse(jsonstr) */
console.log(data)
for(i=0;i<data.length;i++){
arr1.push(parseInt(data[i].res_price));
}
for(i=0;i<data.length;i++){
arr2.push(data[i].purchase_date);
}
/* console.log(arr1)
console.log(arr2) */
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '一年内每月进货经费',
subtext: '进货统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['经费']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data:arr2
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 元'
}
},
series: [
{
name:'当月经费',
type:'line',
data:arr1,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
],
backgroundColor:'#F7F8F9'
};
myChart.setOption(option);
})
})
</script>
注意:json格式数据
转载于:https://blog.51cto.com/12418986/1889284