各位小伙伴大家好，今天和大家分享一下这两天正在研究的Echarts图形界面的显示：
需求分析：将数据从数据库查出，经过mybatis，service，controller后导入到前台界面，利用js循环，将数据导入到数组中，在echarts中进行数据显示操作：
一、在jsp界面中创建需要显示echarts的div（div的初始状态是hidden状态，触发点击事件后，进行显示并导入echarts图形）:
<div id=‘main‘ class=‘one‘ hidden=‘hidden‘></div>
二、给div添加CSS样式，控制期长宽大小：
.one{
width:**%;
height:**px;
}
三、将数据注入并显示echats界面（此处以金额为例）：
1、var amoney=[ ]; var bmoney=[ ] ; var cmoney=[ ]; var daylist= [];
2、从后台取得数据：list<Test> (Test含有amoney,bmoney,cmoney三个属性)—将数据进行循环注入到数组中:
if(list){
for(int i=0;i<list.length;i++){
amoney.push(list.amoney); //push 指的是将数据追加到数组的操作
bmonye.push(list.bmoney);
cmoney.push(list.cmonye);
}
}
3、将echarts进行初始化，并将其注入到div中
myEcharts=echarts.init(div);
myEcharts.setOption({
text: ‘金额‘
},
tooltip: {
trigger: ‘axis‘,
},
legend: {
data: [‘a金额‘,‘b金额‘,‘c金额‘],
bottom: 3
},
xAxis: [{
type: ‘category‘,
data:daylist, //日期注入，定义xz轴
axisLabel: {
interval: 0
},
axisPointer: {
type: ‘shadow‘
}
}],
yAxis: [
{
type: ‘value‘,
min: allCountMin,
max: allCountMax,
interval: allCountInterval,
boundaryGap: [0,0.1], //利用最大值最小值定义y轴
name: ‘元‘/*,
,splitLine : {
show : false
},
scale : true
}
],
series:
[{
name: ‘a金额‘,
type: ‘line‘,
data: amoney,
itemStyle: {
normal: {
color: ‘rgb(##,##,##)‘ //a金额，颜色定义采用rgb形式，type类型是折线图
}
}
} {
name: ‘b金额‘,
type: ‘line‘,
data: cmoney,
itemStyle: {
normal: { //16进制定义的颜色不兼容所有浏览器，会出现某些浏览器无法正确显示颜色的问题，建议各位定义颜色是采取用rgb形式定义
color: ‘#0000‘
}
}
}
}]
})