ECharts
View on GitHub
Home
Example
API & Doc
Download
ZIP (Latest)
Link
Ecom-FE
Data Visualization
ZRender
option
option = { title : { text: '温度计式图表', subtext: 'From ExcelHome', sublink: 'http://e.weibo.com/1341556070/AizJXrAEa' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: function(param){ return param[0][1] + '
' + param[0][0] + ' : ' + param[0][2] + '
' + param[1][0] + ' : ' + (param[1][2] + param[0][2]); } }, legend: { selectedMode:false, data:['Acutal', 'Forecast'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'category', splitLine : {show: false}, data : ['Cosco','CMA','APL','OOCL','Wanhai','Zim'] } ], yAxis : [ { type : 'value', boundaryGap: [0, 0.1], splitArea : {show : true} } ], series : [ { name:'Acutal', type:'bar', stack: 'sum', barCategoryGap: '50%', itemStyle: { normal: { color: 'tomato', borderColor: 'tomato', borderWidth: 6, label : { show: true, position: 'inside' } } }, data:[260, 200, 220, 120, 100, 80] }, { name:'Forecast', type:'bar', stack: 'sum', itemStyle: { normal: { color: '#fff', borderColor: 'tomato', borderWidth: 6, label : { show: true, position: 'top', formatter: function(a, b, c) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == b) { return option.series[0].data[i] + c; } } }, textStyle: { color: 'tomato' } } } }, data:[40, 80, 50, 80,80, 70] } ] };
Refresh ~