echarts 折线图,可滑动

1、主要得展示-折线图，x轴可以滑动，如图

详细代码如下：

<template>
  <div class="month-charts">
    <div class="month-charts-content">
      <div class="month-charts-title">本月客流图表</div>
      <eCharts
        class="flow-chart-box"
        :options="flowOptions(echartsData)"
      ></eCharts>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import eCharts from "vue-echarts";
import { monthFlowOptions } from "../monthConfig.js";
export default {
  components: { eCharts },
  data() {
    return {
      curMonth: null,
      curDays: [],
      echartsData: {},
    };
  },
  created() {
    this.getNowMonth();
  },
  methods: {
    getNowMonth() {
      this.curMonth = moment().month() + 1;
      let days = moment().daysInMonth();
      for (let i = 1; i <= days; i++) {
        this.curDays.push(this.curMonth + "." + i);
      }
    },
    flowOptions(data) {
      return monthFlowOptions(data, this.curMonth, this.curDays);
    },
  },
};
</script>
<style lang="scss" scoped>
.month-charts {
  position: relative;
  top: -10px;
  width: 100%;
  height: 322px;
  border: 1px solid red;
  display: flex;
  justify-content: center;

  .month-charts-content {
    width: 90%;
    border: 1px solid black;
    background-color: #fff;
    border-radius: 4px;
    padding: 4% 4%;
    .month-charts-title {
      font-size: 16px;
      font-family: PingFangSC;
      color: #000000;
    }
  }

  .flow-chart-box {
    width: 100%;
    height: 280px;
  }
}
</style>

图表组件数据

import moment from "moment";

export const monthFlowOptions = function (data, curMonth, curDays) {
    let viewLength = 7;
    let listLength = curDays.length;
    let startValue = listLength - viewLength < 0 ? 0 : listLength - viewLength;
    let endValue = listLength - 1;
    let curYear = moment().year()

    return {
        title: {
            subtext: "客流量（人）",
        },
        xAxis: {
            // boundaryGap: true,  //false没有边距，true有边距

            data: curDays,
            axisTick: {
                show: false,  //去除刻度线
            },
            axisLabel: {
                color: '#4d4d4d',
                fontSize: 11,
                interval: 0,  //x轴刻度配置，0:表示全部显示不间隔，auto:表示自动根据刻度个数和宽度自动设置间隔个数
            },
            axisLine: {
                lineStyle: {
                    color: '#e6e6e6',  //y轴轴线颜色
                }
            },
        },
        yAxis: {
            type: "value",
            data: [0, 100, 200, 300, 400, 500, 600],
            axisTick: {
                show: false,  //去除刻度线
            },
            axisLabel: {
                color: '#4d4d4d',  //文本颜色
            },
            axisLine: {
                lineStyle: {
                    color: "#e6e6e6",  //y轴轴线颜色
                }
            },
            splitLine: {   //网格线
                lineStyle: {
                    color: "#e6e6e6",
                    type: "dashed",
                },
                show: true
            }
        },
        series: [
            {
                type: "line",
                data: [233, 44, 33, 333, 434, 155, 600, 455, 343, 4, 343, 55, 33, 554, 600, 242, 222, 322, 144, 322, 55, 66, 33, 75, 88, 454, 64, 234, 134, 343, 11],
                symbolSize: 6,  //拐点大小
                color: ["#DC4A46"],
                smooth: false,  //折线有无弧度
                animationDuration: 500,
                markLine: {  //平均线设置
                    silent: true,  //true去掉鼠标悬浮线上的动画
                    symbol: "none",  //该线无样式
                    label: {
                        // show: false,  //该线上得值去掉
                        formatter: "均客线",
                        padding: [-13, -20, -40, -45]
                    },
                    lineStyle: {
                        normal: {
                            type: "solid",
                            color: "#000000"
                        }
                    },
                    data: [{ type: 'average', name: "平均值" }]
                }
            }
        ],
        grid: {//折线图位置
            top: "15%",
            left: "1%",
            right: "1%",
            bottom: "10%",
            backgroundColor: "#fff",
            containLabel: true
        },
        tooltip: {  //提示框取值默认值，即鼠标移动到柱状图会显示内容
            trigger: "axis",  //触发类型；轴触发，axis则鼠标hover到折线图显示全部数据，item则鼠标hover到折线点显示相应数据
            position: function (point, params, dom, rect, size) {  //设置提示框位置随鼠标移动，并解决提示框显示不全的问题
                var x = 0;  //x坐标位置
                var y = 0;  //y坐标位置
                var pointX = point[0];       //当前鼠标位置
                var pointY = point[1];
                var boxWidth = size.contentSize[0];  //提示框大小
                var boxHeight = size.contentSize[1];
                if (boxWidth > pointX) {  //boxWdith > pointx 说明鼠标左边放不下提示框
                    x = 5;
                } else {  //左边放得下
                    x = pointX - boxWidth;
                }

                //boxHeight > pointY 说明鼠标上边放不下提示框    
                if (boxHeight > pointY) {
                    y = 5;
                } else {  //上边放得下
                    y = pointY - boxHeight;
                }
                return [x, y]
            },
            axisPointer: {
                type: "line"
            },
            formatter: function (params) {  //提示框文案
                return curYear + '.' + params[0].name + '<br/>' + "客流：" + params[0].value
            }
        },
        // 缩放平移组件
        dataZoom: [
            {
                type: 'inside',  //slider有滑块，inside内置
                disabled: false,  //是否停止组件功能
                xAxisIndex: 0,  //x轴,可以用数组表示多个轴
                zoomLock: true,  //是否锁定区域大小（true,只能平移不能缩放）
                preventDefaultMouseMove: false,
                filterMode: "empty",
                startValue: startValue,  //一行有几个（起始数组下标）
                endValue: endValue,    //一行有几个（结束数组下标）
                start: null,
                end: null,
            },
        ]

    }
}

特别要注意得是，在引用得一些echarts组件时要进行配置，若不配置，可能引发一些数据得不能试用
在echarts配置中，引入，例子，在相应得echarts.js中

import Vue from "vue";
//映入echarts
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/gauge";
import 'echarts/lib/chart/radar';
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/dataZoom";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/visualMap";
import 'echarts/lib/component/markLine';
Vue.component("v-charts", ECharts);

本文地址：https://blog.csdn.net/weixin_43843679/article/details/109240659