echarts图表存入mysql_echarts呈现数据表图形(示例代码)

//初始化

var dom = document.getElementById("barone");var myChart =echarts.init(dom);var app ={};

option= null;

markPoint= null;//图表使用

var option ={

title: {

text:‘成绩图‘},

tooltip: {

trigger:‘axis‘},

toolbox: {

show:true,

feature: {

mark: { show:true},

dataView: { show:true, readOnly: false},

magicType: { show:true, type: [‘line‘, ‘bar‘] },

restore: { show:true},

saveAsImage: { show:true}

}

},

calculable:true,

xAxis: [

{

type:‘category‘,

data: [""]

}

],

yAxis: [

{

type:‘value‘}

],

series: [

{

type:‘bar‘,

data: [""], //数据显示的地方，ajax

markPoint: {

data: [

{ type:‘max‘, name: ‘最大值‘},

{ type:‘min‘, name: ‘最小值‘}

]

},

markLine: {

data: [

{ type:‘average‘, name: ‘平均值‘}

]

},

},

],

dataZoom: [

{

show:false,

start:0,

end:100}

]

};if (option && typeof option === "object") {

myChart.setOption(option,true);

}//获取数据

$.ajax({

url:"echartsData/barone.ashx", //数据来源

data: { type: "bar"},

cache:false,

async:false,

dataType:‘json‘,

success:function(data) {if(data) {

myChart.setOption({

xAxis: [{ data: data.xAxis }],

series: [

{

data: data.series,

itemStyle: {//显示柱状图顶部的数字

normal: {

color:‘#2d9fd8‘,

label: {

show:true,

position:‘top‘,

textStyle: {

baseline:"bottom"}

}

}

},

barWidth:20}

]

});

}

},

error:function(msg) {

alert("系统发生错误1");

}

});

var dom = document.getElementById("barthree");var myChart2 =echarts.init(dom);var app ={};

option= null;var option ={

title: {

text:‘成绩表‘},

tooltip: {

trigger:‘axis‘},

legend: {

data: [‘数学‘, ‘语文‘, ‘英语‘]

},

toolbox: {

show:true,

feature: {

mark: { show:true},

dataView: { show:true, readOnly: false},

magicType: { show:true, type: [‘line‘, ‘bar‘] },

restore: { show:true},

saveAsImage: { show:true}

}

},

calculable:true,

xAxis: [

{

type:‘category‘,

data: [""]

}

],

yAxis: [

{

type:‘value‘}

],

series: [

{

name:‘访问来源‘,

type:‘bar‘,

data: [""],

itemStyle: {

normal: {

color:‘#2d9fd8‘,

label: {

show:true,

position:‘top‘,

textStyle: {

baseline:"bottom"}

}

}

},

markPoint: {

data: [

{ type:‘max‘, name: ‘最大值‘},

{ type:‘min‘, name: ‘最小值‘}

]

},

markLine: {

data: [

{ type:‘average‘, name: ‘平均值‘}

]

},

}

],

dataZoom: [

{

show:false,

start:0,

end:100}

]

};if (option && typeof option === "object") {

myChart2.setOption(option,true);

}

$.ajax({

url:"echartsData/barthree.ashx",

data: { type:"bar"},

cache:false,

async:false,

dataType:‘json‘,

success:function(data) {if(data) {

myChart2.setOption({

legend: [{ data: data.legend }],

xAxis: [{ data: data.xAxis }],

series: data.series

});

}

},

error:function(msg) {

alert("系统发生错误");

}

});