echarts正负y轴,tooltip自动播放
- 效果图
- 正负y轴-重要代码
- 正负y轴-重要代码
- Tooltip自动播放-重要代码
- 完整代码
效果图
正负y轴-重要代码
axisLabel: {
formatter(value) {
return Math.abs(value);
// 负数取绝对值变正数(x轴本来数据是正负才能分开两边展示的,
//所以我们只是把负数处理为正数在视觉上显示)
}
},
正负y轴-重要代码
axisLabel: {
formatter(value) {
return Math.abs(value);
// 负数取绝对值变正数(x轴本来数据是正负才能分开两边展示的,
//所以我们只是把负数处理为正数在视觉上显示)
}
},
Tooltip自动播放-重要代码
// tooltip跳转
// this.axisIndex指当前tootip所在索引
// barChart 是Echarts初始化后的DOM节点
// this.xAxis为横坐标长度
setAnimation() {
this.clearTooltip();
// timeAnimation为我们设置的进行动态执行tooltip的方法
this.timeAnimation = setInterval(() => {
this.barChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: this.axisIndex,
});
this.axisIndex++;
// 求余用来循环索引值
this.axisIndex = this.axisIndex % this.xAxis.length;
}, 2000);
},
// 鼠标选项
// 这里我们需要当鼠标滑到某一图形状态的时候停止动画
// 当鼠标划走则继续执行
mouseAnimation() {
this.barChart.on("mouseover", (params) => {
this.clearTooltip();
this.axisIndex = params.dataIndex + 1;
this.barChart.on("mouseout", (params) => {
this.setAnimation();
});
});
},
// 结束tooltip
clearTooltip() {
if (this.timeAnimation) {
clearInterval(this.timeAnimation);
this.timeAnimation = null;
}
},
},
完整代码
drawLine() {
this.myChart = echarts.init(document.getElementById(this.elid));
this.myChart.setOption({
color: COLOR_INFO,
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
label: {
// 控制自动播放时候,y轴显示的刻度是整数
// precision: 0,
// color: '#fff',
// backgroundColor: 'none',
fontSize: 14,
// 负数零的修改
formatter: params => {
if (typeof params.value == "number") {
params.value = "";
return params.value;
} else {
return params.value;
}
}
}
},
borderColor: "rgba(0,0,0,0.80)", // 提示框边框
borderWidth: 0,
backgroundColor: "rgba(0,0,0,0.80)", // 提示框背景
formatter: params => {
return "";
}
},
grid: {
left: 20,
x: 0,
y: 10,
x2: 10,
y2: 0,
containLabel: true,
show: true, //
borderWidth: "1", //边框宽度
borderColor: "#0f3781" //边框颜色
},
xAxis: [
{
type: "category",
boundaryGap: false, //文字居中
axisTick: {
show: true
},
// 设置y轴线的属性
axisLine: {
lineStyle: {
color: "#888"
}
},
splitLine: {
//网格线
show: true,
lineStyle: {
type: "dashed",
color: "#113d5e"
}
},
// x轴字体倾斜
axisLabel: {
interval: 0,
rotate: 40,
color(value, index) {
return index == 1 ? "#fff" : "#888";
}
},
data: ["", ...this.xAxis, ""] // y轴下到上
}
],
yAxis: [
{
type: "value",
// 设置x轴线的属性
axisLine: {
lineStyle: {
color: "#888"
}
},
splitLine: {
//网格线
show: false
},
axisLabel: {
formatter(value) {
return Math.abs(value); // 负数取绝对值变正数(x轴本来数据是正负才能分开两边展示的,所以我们只是把负数处理为正数在视觉上显示)
}
},
max: this.maxNum,
min: -this.maxNum
}
],
series: [
{
name: "浦东",
type: "bar",
stack: "总量",
barWidth: 12,
barGap: "50%",
barMaxWidth: "22",
itemStyle: {
normal: {
color: "#5497ff"
},
//鼠标经过有高亮显示
emphasis: {
color: "5cb9fe"
}
},
data: [
// 数据给升序
"",
...this.pudongdata,
""
]
},
{
name: this.curCity,
type: "bar",
stack: "总量", // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
barWidth: 12,
barGap: "50%",
itemStyle: {
normal: {
color: "#3ae362"
},
emphasis: {
color: "#4beda3"
}
},
data: ["", ...this.completedata, ""]
},
// 折线图数据
{
name: "浦东",
type: "line",
itemStyle: {
normal: {
color: "#5497ff"
}
},
showSymbol: false, //数据点的隐藏
lineStyle: { width: 1 },
areaStyle: {
//阴影
color: "rgba(167, 219, 243, 0.3)"
},
data: ["", ...this.pudongpolicydata, ""]
},
{
name: this.curCity,
type: "line",
itemStyle: {
normal: {
color: "#3ae362"
}
},
// 折线图的宽
lineStyle: { width: 1 },
// 阴影部分颜色
areaStyle: {
color: "rgba(212, 247, 202, 0.3)"
},
showSymbol: false, //隐藏数据节点
data: ["", ...this.completepolicydata, ""]
}
]
});
// 图表自动播放
this.setAnimation();
},
// -----------------------------------
setAnimation() {
this.clearTooltip();
this.mTime = setInterval(() => {
// 鼠标放上时候传递对应的this.curindex
this.$emit("changedata", this.curindex);
this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: this.curindex
});
this.interindex = this.curindex;
this.curindex++;
if (this.curindex > this.xAxis.length) {
this.curindex = 1;
}
this.mouseAnimation();
}, 2000);
},
// 鼠标选项-这里我们需要当鼠标滑到某一图形状态的时候停止动画-当鼠标划走则继续执行
mouseAnimation() {
this.myChart.on("mouseover", params => {
this.clearTooltip();
this.interindex = this.curindex - 1;
this.curindex = params.dataIndex + 1;
this.$emit("changeind", this.curindex);
this.myChart.on("mouseout", params => {
// 当鼠标离开重新开启计时器
this.setAnimation();
});
});
},
// 结束tooltip
clearTooltip() {
if (this.mTime) {
clearInterval(this.mTime);
this.mTime = null;
}
}