Echarts-柱形圖
阿新 • • 發佈:2018-11-16
var clyyqst ={
initAction:function(){
/*$('.menuItem').removeClass('menuSelected');
$('.menuItem').eq(4).addClass('menuSelected');*/
clyyqst.initChart();
},
initChart:function(){
async : false,
type: "POST",
url: "clyyqs/qymc", //企業名稱top10
dataType: 'json',
success: function (data) {
for(var i in data.qymcs){
dataOne.push(data.qymcs[i])
}
}
});
var legendOne=[];
var seriesOne=[];
$.each(dataOne,function (i,val) {
legendOne.push(val.QYMC);
seriesOne.push(val.MC);
});
var optionOne={
tooltip: {
trigger: 'item',
formatter: "{b}: {c}"
},
grid:{
x:70,
y:45,
x2:50,
y2:80,
},
xAxis: {
data: legendOne,
axisLine:{
lineStyle:{
color:'#053b4c'
}
},
axisTick:{
show:false
},
axisLabel: {
interval:0,
rotate:30,
textStyle: {
color: '#0F0F0F'
}
},
splitLine:{
show:false
}
},
yAxis: {
axisLine:{
show:false,
lineStyle:{
color:'#193b4e'
}
},
axisTick:{
show:false
},
axisLabel: {
textStyle: {
color: '#0F0F0F'
}
},
splitLine:{
lineStyle:{
color:'#053b4c'
}
}
},
color:['#41bca0'],
series: [
{
type: 'bar',
barWidth:'46',
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#41bca0','#2a9abf','#696daa','#f2bd32','#ff433d','#B8860B','#8B8B00','#7EC0EE','#458B00','#B0E2FF'];
return colorList[params.dataIndex]
}
}
},
data:seriesOne
}
]
};
chartOne.setOption(optionOne);
initAction:function(){
/*$('.menuItem').removeClass('menuSelected');
$('.menuItem').eq(4).addClass('menuSelected');*/
},
initChart:function(){
var chartOne = echart.init(document.getElementById('chartOne'));
var dataOne=[];
$.ajax({
type: "POST",
url: "clyyqs/qymc", //企業名稱top10
dataType: 'json',
success: function (data) {
for(var i in data.qymcs){
dataOne.push(data.qymcs[i])
}
}
});
var legendOne=[];
var seriesOne=[];
$.each(dataOne,function (i,val) {
seriesOne.push(val.MC);
});
var optionOne={
tooltip: {
trigger: 'item',
formatter: "{b}: {c}"
},
grid:{
x:70,
y:45,
x2:50,
y2:80,
},
xAxis: {
data: legendOne,
axisLine:{
lineStyle:{
color:'#053b4c'
}
},
axisTick:{
show:false
},
axisLabel: {
interval:0,
rotate:30,
textStyle: {
color: '#0F0F0F'
}
},
splitLine:{
show:false
}
},
yAxis: {
axisLine:{
show:false,
lineStyle:{
color:'#193b4e'
}
},
axisTick:{
show:false
},
axisLabel: {
textStyle: {
color: '#0F0F0F'
}
},
splitLine:{
lineStyle:{
color:'#053b4c'
}
}
},
color:['#41bca0'],
series: [
{
type: 'bar',
barWidth:'46',
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#41bca0','#2a9abf','#696daa','#f2bd32','#ff433d','#B8860B','#8B8B00','#7EC0EE','#458B00','#B0E2FF'];
return colorList[params.dataIndex]
}
}
},
data:seriesOne
}
]
};
chartOne.setOption(optionOne);
}
ajax傳入資料:{"yyfwss":[{"MC":6774,"YYFWSMC":"湖北天凱風林電子有限公司"},{"MC":3327,"YYFWSMC":"武漢金飛田通訊技術有限公司"},{"MC":2482,"YYFWSMC":"湖北中寰衛星導航通訊有限公司"},{"MC":1741,"YYFWSMC":"湖北中交興路資訊科技有限公司"},{"MC":1616,"YYFWSMC":"湖北天盾電子技術有限公司"},{"MC":725,"YYFWSMC":"湖北航通北斗科技有限公司"},{"MC":676,"YYFWSMC":"湖北泰躍衛星技術發展股份有限公司"},{"MC":655,"YYFWSMC":"武漢長江通訊智聯技術有限公司"},{"MC":640,"YYFWSMC":"武漢中瀚科技有限公司"},{"MC":496,"YYFWSMC":"浙江道為爾科技有限公司武漢分公司"}]}