echarts 显示柱状图
1、引入<script type="text/javascript" src="/Common/echarts/echarts.js?v=636474012741000281"></script>2、添加容器<div id="main" style="heig
·
1、引入
<script type="text/javascript" src="/Common/echarts/echarts.js?v=636474012741000281"></script>
2、添加容器
<div id="main" style="height:100%;width:100%"></div>
3、读数据,显示图标
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '投资计划完成情况'
},
tooltip: {
show: true
},
toolbox: {
show: true,
feature: {
mark: { show: true },
//dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
//restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['计划', '实际']
},
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value', name: '单位(亿)'
}
],
series: [
{
"name": "计划",
"type": "bar",
"data": []
},
{
"name": "实际",
"type": "bar",
"data": []
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
myChart.showLoading();
//加载数据
var x = []; //投资公司
var y1 = []; //计划
var y2 = []; //实际
$G.dispatcher({
action: "GetTZJHWCQK",
showMask: false,
//args: [changeSum[0]],
success: function (data) {
for (var i = 0; i < data.length; i++) {
x.push(data[i].DWMC); //单位
y1.push(data[i].JHMB); //计划
y2.push(data[i].SJWC); //实际
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: x
},
series: [{
name: '计划',
data: y1
},
{
name: '实际',
data: y2
}
]
});
}
});
更多推荐
已为社区贡献1条内容
所有评论(0)