let colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
data:['2015 降水量', '2016 降水量']
},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
formatter: function (params) {
return '降水量 ' + params.value
+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');
}
}
},
data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return '降水量 ' + params.value
+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');
}
}
},
data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '2015 降水量',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '2016 降水量',
type: 'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
}
]
};
color 是有默认值的,之所以在这里显式地设置颜色,是因为 color 的默认值只能针对于 series(即曲线的颜色),无法针对坐标轴,这样做可以自定义 series 的同时,也设置了坐标轴的颜色(见 xAxis.axisLine.lineStyle)。这对于双轴的图表有很强的辨识度。
默认为 item,这里设置为 none,表示没有触发器,是因为已经在 xAxis .axisPointer.label 进行了配置,所以会在坐标轴处显示含有相关数据的标签,因此不必赘余地增加 tooltip 的触发器了。
默认是 line,但这样就必须显式地在 xAxis.axisPointer.show、yAxis.axisPointer.show 处设置,而设置为 cross,则会因为 tooltip.axisPointer. axis = 'auto' 这样的默认配置而自动选择类目轴或时间轴(xAxis.type 已经配置为类目轴)。
该数组需要与 series 的 name 保持一致
由于类目轴 xAxis. boundaryGap 默认为 true,因此类目轴两边会有留白(为了美观),此时的刻度也不再与标签对齐,需要设置 xAxis.axisTick.alignWithLabel 为 true
默认为 true,因此 x 轴总是与 y 轴的 0 刻度对齐,对于双轴是绝对不行的,因为另一个 x 轴需要与 y 轴的顶部对齐,于是这里全部设置为 false。
ps:经过测试,即使这里两边都不设置,也不会有影响,如果都设置成 true,也不会有影响,有可能是因为设置冲突,因此忽略配置。
这里使用回调函数的形式进行了设置,之前的 tooltip.trigger 关闭了,就是因此这里自定义的 label,否则 tooltip 会让用户有一些混乱。
在单个图表实例中存在多个 x 轴的时候就必须使用这个,否则 echarts 无法辨别 series 对应哪个 x 轴。