echart图与JSON整合
写pojo、povo、interface、interfaceImpl、controller实现数据库数据转为Json数据
povo
public class Country_A extends CTA_Attribute {
private int cId;
private String countryName;
private int CAId;
private double AreaSum;
private double FA;
private double FARice;
private double FAWheat;
private double FARiceWheat;
private double FAMaize;
private double FAWheatMaize;
private double PA;
private double PASoya;
private double PAWheatSoya;
private double PACotton;
private double PARapeseed;
private double PARiceRapeseed;
interface
@Mapper
public interface CountryTAService {
@Select("SELECT countryName,AreaSum,FA,FARice,FAMaize,FAWheat,FARiceWheat,FAWheatMaize,PA,PASoya,PACotton,PARapeseed,PAWheatSoya,PARiceRapeseed\n" +
"FROM country,c_atrribute\n" +
"WHERE country.cId=c_atrribute.cId")
List<Country_A> getCountryTAService();
}
interfaceImpl
@Service
public class CountryTAServiceImpl implements CountryTAService{
@Autowired
CountryTAService countryTAService;
@Override
public List<Country_A> getCountryTAService() {
List<Country_A> countryTAService = this.countryTAService.getCountryTAService();
return countryTAService;
}
}
controller
@Autowired
CountryTAServiceImpl countryTAServiceImpl;
@ResponseBody
@RequestMapping(value = "/CTA_Attribute")
public String cta() throws JSONException, JsonProcessingException {
List<Country_A> CTA_Attribute =countryTAServiceImpl.getCountryTAService();
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(CTA_Attribute); //将list中的对象转换为Json格式的数组
System.out.println(json);
return json;
}
echart图与JSON整合
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
myChart.setOption({
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
top:'10%',
data: ['“两区”耕地总面积', '功能区耕地面积','水稻生产功能区地块面积',
'小麦生产功能区地块面积','水稻和小麦复种区地块面积','玉米生产功能区地块面积',
'小麦和玉米复种区地块面积','保护区耕地面积（不含天然橡胶）','大豆生产保护区地块面积',
'小麦和大豆复种区地块面积','棉花生产保护区地块面积','油菜籽生产保护区地块面积','水稻和油菜籽复种区地块面积']
},
grid: {
top:'30%',
left: '3%',
right: '7%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
data:[]
},
yAxis: {},
series: [
{
name: '“两区”耕地总面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '功能区耕地面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '水稻生产功能区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '小麦生产功能区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '水稻和小麦复种区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '玉米生产功能区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '小麦和玉米复种区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '保护区耕地面积（不含天然橡胶）',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '大豆生产保护区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '小麦和大豆复种区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '棉花生产保护区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '油菜籽生产保护区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '水稻和油菜籽复种区地块面积',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
}
]
})
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var AreaSum=[];
var FA=[];
var FARice=[];
var FAWheat=[];
var FARiceWheat=[];
var FAMaize=[];
var FAWheatMaize=[];
var PA=[];
var PASoya=[];
var PAWheatSoya=[];
var PACotton=[];
var PARapeseed=[];
var PARiceRapeseed=[];
var names=[]; //类别数组（实际用来盛放X轴坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/CTA_Attribute", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
console.log(result);
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].countryName); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
AreaSum.push(result[i].areaSum); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
FA.push(result[i].fa); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
FARice.push(result[i].farice); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
FAWheat.push(result[i].fawheat); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
FARiceWheat.push(result[i].fariceWheat); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
FAMaize.push(result[i].famaize); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
FAWheatMaize.push(result[i].fawheatMaize); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
PA.push(result[i].pa); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
PASoya.push(result[i].pasoya); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
PAWheatSoya.push(result[i].pawheatSoya); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
PACotton.push(result[i].pacotton); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
PARapeseed.push(result[i].parapeseed); //挨个取出销量并填入销量数组
}
for(var i=0;i<result.length;i++){
PARiceRapeseed.push(result[i].pariceRapeseed); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
yAxis: {
name:'行政区域/县',
type: 'category',
data:names
},
xAxis:{
name:'面积/公顷',
type:'value'},
series: [
{
name: '“两区”耕地总面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#E800E8'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data:AreaSum
},
{
name: '功能区耕地面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#FFECEC'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: FA
},
{
name: '水稻生产功能区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#FFB5B5'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: FARice
},
{
name: '小麦生产功能区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#FF7575'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: FAWheat
},
{
name: '水稻和小麦复种区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#FF0000'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: FARiceWheat
},
{
name: '玉米生产功能区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#CE0000'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: FAMaize
},
{
name: '小麦和玉米复种区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#750000'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data:FAWheatMaize
},
{
name: '保护区耕地面积（不含天然橡胶）',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#ACD6FF'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: PA
},
{
name: '大豆生产保护区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#84C1FF'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: PASoya
},
{
name: '小麦和大豆复种区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#66B3FF'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: PAWheatSoya
},
{
name: '棉花生产保护区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#2894FF'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: PACotton
},
{
name: '油菜籽生产保护区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#0072E3'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: PARapeseed
},
{
name: '水稻和油菜籽复种区地块面积',
type: 'bar',
stack: '总量',
itemStyle:{
normal:{
color:'#005AB5'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: PARiceRapeseed
}
]
})
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
结果
扫一扫
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
