<div class="chart-pic">
<div id="divMainBar" class="chart"></div>
</div>
<!-- ECharts單文件引入 -->
<script type="text/javascript" src="<c:url value="/scripts/echarts/echarts.js"/>"></script>
<script type="text/javascript">
var xAxisDataJson = [];
var seriesDataJson = [];
$.ajax({
url:"${ctx}/backoffice/Unitinfo/subJson.do",
type:"post",
async:false,
success:function(data){
$.each(data,function(index,obj){
xAxisDataJson.push(obj.name);
seriesDataJson.push(obj.code);
});
}
});
var barData = {
xAxisData:function(){
return xAxisDataJson;
},
seriesData:function(){
return seriesDataJson;
}
};
var optionBar = {
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}
}
},
// calculable: true,
grid: {
borderWidth: 0,
x:20,//直角座標系內繪圖網格左上角橫座標
x2:20,
y: 30,
y2: 30
},
xAxis: [
{
type: 'category',
show: true,
data: xAxisDataJson,
axisLabel:{
interval:0//X座標顯示內容非自動
}
}
],
yAxis: [
{
type: 'value',
show: true
}
],
series: [
{
name: 'ECharts例子個數統計',
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: seriesDataJson
}
]
};
// 路徑配置
require.config({
paths: {
echarts: '<c:url value="/scripts/echarts"/>'
}
});
require(
[
'echarts',
'echarts/chart/bar'
],
requireCallbackBar
);
function requireCallbackBar(ec) {
// 基於準備好的dom,初始化echarts圖表
var myChartBar = ec.init(document.getElementById('divMainBar'));
// 爲echarts對象加載數據
myChartBar.setOption(optionBar);
//自適應大小
window.onresize = myChartBar.resize;
}
</script>
echarts 實例(一:動態數據)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.