echarts中正负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;
			}
		}

链接: https://blog.csdn.net/weixin_39936341/article/details/82384208?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase.
链接: https://blog.csdn.net/Deku_Ln/article/details/112027673.