横向柱状图滚动轮播，折线图

举头三尺有神农

于 2022-05-10 11:29:45 发布

阅读量1.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/M__Yang_/article/details/124683944

本文介绍了如何使用Echarts实现横向柱状图的轮播滚动展示以及折线图Tooltip的自动轮播显示，旨在提供一种数据可视化的新方式，便于读者理解和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没发了，每次都有问题想着发，每次都没发，太懒了，记录一下吧，主要还是方便自己。

横向柱状图轮播滚动展示---

主要内容是这一块

   initChart(datas) {
      let data = datas.xdatas;
      let chart = echarts.init(this.$refs.charts);
      let option = {
        grid: {
          top: "0%",
          left: "20%",
          right: "15%",
          bottom: "15%",
        },
        // 区域缩放
        dataZoom: [
          {
            // 第一个 dataZoom 组件
            type: "inside",
            yAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
            startValue: 0, // 数据窗口范围的起始数值index
            endValue: 5, // 数据窗口范围的结束数值index
          },
        ],
        xAxis: {
          type: "value",
          splitLine: {
            // 去除背景网格线
            show: false,

最低0.47元/天解锁文章