配置项如下
var data = [100, 80, 180, 195, 188];
var markLineData = [];
for (var i = 1; i < data.length; i++) {
markLineData.push([{
xAxis: i - 1,
yAxis: data[i - 1]
}, {
xAxis: i,
yAxis: data[i]
}]);
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:[ '河南地区出货量', '天津地区出货量', '河南地区占比', '天津地区占比'],
align: 'left',
left: 100,
bottom: 0
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
data: ['猪肉类', '禽肉类', '牛羊肉类', '水产类', '速冻调理'],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#666'
}
}
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '(万元)',
axisTick: {
show: false,
lineStyle: {
color: '#666'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#666'
}
},
max: 400,
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
name: '%',
scale: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
max: 100,
min: 0,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name:'河南地区出货量',
type:'bar',
barWidth: 30,
itemStyle:{
normal:{
color:'#a0c0fd'
}
},
data: [390, 200, 180, 160, 150]
},
{
name:'天津地区出货量',
type:'bar',
barWidth: 30,
itemStyle:{normal:{color:'#9599fd'}},
data: [190, 100, 80, 95, 88]
},
{
name:'河南地区占比',
type:'line',
itemStyle:{
normal:{
color:'#2cfffe'
}
},
data: [100, 80, 180, 195, 188],
symbol: 'circle',
symbolSize: 10,
// symbolOffset: ['50%', 0]
},
{
name:'天津地区占比',
type:'line',
itemStyle:{normal:{color:'#fffd38'}},
data: [190, 100, 80, 95, 88],
symbol: 'circle',
symbolSize: 10
}
]
};