grid 控制边距
grid:{
left:'3%',right:'7%',bottom:'30'
}
toolTip 悬浮提示
tooltip : {
trigger: 'axis',//axis所有点显示悬浮信息,item只有在折线上标出的点显示悬浮信息(markPoint悬浮信息item时会显示,而axis不显示)
axisPointer: { type: 'none' },
formatter:function (params) {
var str = "";
str = str + " " + params[0].dataIndex + " 点 至 " + (params[0].dataIndex+1) + " 点</br>";
for(var i = 0; i < params.length; i++){
str = str + params[i].marker + params[i].seriesName + ":" + params[i].value + "</br>";
}
return str;
}
}
legned 图例 data中的值是series中各数据的name,xy图例位置
legend: {
data:[
'订单总数','线上订单数量', '营业厅订单数量'
],
x:"center",
y:"bottom"
}
boundaryGap 控制刻度对其(从0开始)
xAxis : [
{
type : 'category',
name : '日期',
splitLine:{show: false},
boundaryGap: false,
data : [${xAxisData!noescape}],
axisLabel :{
formatter:function (value, index) {
return value.substr(5).replace("-","/");
}
}
}
]
minInterval 最小间隔,minInterval:1可避免小数
max 坐标极限 max:null自适应,使用function返回null时无效
splitArea 间隔底色,areaStyle:color值为数组类型,按数组中的颜色依次显示
var arr = [${seriesData!noescape}];
var max = parseInt(arr[0]);
for(var i = 0; i < arr.length; i++){
if(max < parseInt(arr[i])) max = parseInt(arr[i]);
}
var maxValue = max<10?10:null;
yAxis : [
{
type : 'value',
name : '订单数量',
minInterval:1,
max:maxValue,
splitArea:{
show:true,
areaStyle:{color:['rgba(250,250,250,0.3)','rgba(248,251,255,1)']}
}
}
]
两个柱状图由同一stack时,可以堆叠
折线图和柱状图有同一name时,可以混合显示
markPoint , markLine silent:true时不响应事件
series : [
{
name:'订单总数',
type:'line',
smooth:true,
itemStyle:{normal:{color:"rgba(255,127,80,1)"}},
markPoint : {
silent:true,
symbol:'pin',
symbolSize:'50',
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
silent:true,
data : [
{type : 'average', name : '平均值'}
],
label:{
position:'end',
formatter:function (params) {
return params.name + ":" + params.value;
}
}
},
data:data.seriesData.split(',')
},
{
name:'线上订单数量',
type:'bar',
stack:'订单数量',
itemStyle:{normal:{color:"rgba(9,133,210,1)"}},
data:data.seriesDataOnline.split(',')
},
{
name:'营业厅订单数量',
type:'bar',
stack:'订单数量',
itemStyle:{normal:{color:"rgba(135,206,250,1)"}},
data:data.seriesDataOffline.split(',')
}
]
setOption设置样式
var daysChart = echarts.init(document.getElementById('daysChart'));
daysChart.setOption(daysOption);