1、想要实现有两个x轴,如果设置了X轴属性,但第二个死活不出来,需要在xAxis中设置:
axisLine: {
onZero: false, //设置此属性!!!
show:true,
lineStyle: {
color: '#ccc'
}
},
2、象形柱图渐变不生效,是color一定要放在items中的normal属性中。
3、完整示例代码:
function N2() {
var n2 = echarts.init(document.getElementById('n2'));
var category = [];
var dottedBase = +new Date();
var barData = [];
var maxData;
var dottedData = [];
for (var i = 0; i < 20; i++) {
var date = new Date(dottedBase += 1000 * 3600 * 24);
category.push([
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join('-'));
var b = Math.random() * 200;
var d = Math.random() * 200;
barData.push(Math.floor(b))
}
maxData = Math.ceil(barData.sort(function (a, b) {
return b - a;
})[0] + 100);
for (var j = 0; j < 20; j++) {
dottedData.push(maxData);
}
var option = {
tooltip : {
show:false,
trigger: 'item',
formatter: "{b}: {c}"
},
grid: {
left: '10%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap: true,
position: 'bottom',
data : category,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#7D8590'
}
}
},
{
type : 'category',
position: 'top',
boundaryGap: true,
data : barData,
axisTick: {
show:false
},
axisLine: {
onZero: false,
show:true,
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#56aaf2',
fontSize:'14'
}
}
}
],
yAxis :{
type : 'value',
splitLine: {
show: false
},
axisLine: {
show:false,
lineStyle: {
color: '#ccc'
}
},
axisTick:{ //y轴刻度线
show:false
},
axisLabel: {
show: true,
textStyle: {
color: '#7D8590'
}
}
},
legend: {
show:false,
orient: 'horizontal',
x: 'right',
data:['应用'],
itemWidth:10,
itemHeight:10,
},
series: [{
name:'应用',
type: 'bar',
barWidth: 20,
legendHoverLink: false,
silent: true,
itemStyle: {
normal:{
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#cbc3df' // 0% 处的颜色
}, {
offset: 1,
color: '#55aaf2' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
} //底色
}
},
data: barData,
z: 1,
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#f1f0f6'
}
},
symbolRepeat: true,
symbolSize: [20, 4],
symbolMargin: 1,
z: -10,
data: dottedData
},
{ //分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#fff'
}
},
legendHoverLink: false,
symbolRepeat: 'fixed',
symbolMargin: 2,
symbol: 'rect',
symbolClip: true,
symbolSize: [20, 2],
symbolPosition: 'start',
symbolOffset: [0, -2],
symbolBoundingData: maxData,
data: barData,
z: 2,
}
]
};
n2.setOption(option);
}