echarts legend头部有遮挡、上半部分显示不全,像被截取了一块
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6794e8c09ed746a781671266e7785d20.png)
legend-textStyle中加入lineHeight即可
- 效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8f78352916494c9fb695faf9f4797683.png)
echarts多条折现配置双Y轴
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/228707831032414b9a687a610c90bab1.png)
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
},
},
{
type: 'value',
axisLabel: {
formatter: '{value}'
},
}
]
series: [
{
name: "1",
data: [],
type: "line",
lineStyle: {
color: "#4F9AFF",
},
yAxisIndex: 1,
},
{
data: [],
name: "2",
type: "bar",
barWidth: "10px",
},
{
data: [],
name: "3",
type: "bar",
barWidth: "10px",
},
],
柱状图/折线图实现自动滚动、鼠标悬停时停止滚动并获取数据、鼠标离开时继续滚动
let currentIndex = 0;
const len = res.data.length;
this.overViewChart.on("mouseover", function (params) {
that.clearTime();
that.overViewChart.dispatchAction({
type: "downplay",
seriesIndex: currentIndex,
});
that.overViewChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
that.overViewChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
currentIndex = params.dataIndex;
that.initTwoBarChart(params.data.key);
});
this.overViewChart.on("mouseout", function () {
that.clearTime();
that.timer = setInterval(() => {
that.overViewChart.dispatchAction({
type: "downplay",
seriesIndex: len,
dataIndex: currentIndex,
});
if (currentIndex >= len - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
that.overViewChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: currentIndex,
});
that.overViewChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: currentIndex,
});
that.initTwoBarChart(resOnline.data[currentIndex].dateString);
}, 3000);
that.timerList.push(that.timer);
});
clearTime() {
if (this.timerList.length > 0) {
this.timerList.forEach((item, index) => {
clearInterval(item);
});
this.timerList = [];
}
},