折线图

效果图

代码

<template>
  <div class="page">
    <div class="title">电压瞬时波峰图</div>
    <div id="main"></div>
  </div>
</template>

<script setup>
  import * as echarts from "echarts";
  import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";
  const myChart = ref(null);

  onMounted(() => {
    echartinit();
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", function () {
      myChart.value.resize();
    });
  });

  // 设置字体
  const getfontsize = (size) => {
    let clientWidth = document.body.clientWidth;
    return (clientWidth / 1920) * size;
  };

  const echartinit = () => {
    // 找到Echart元素
    const chartDom = document.getElementById("main");

    // 默认的时候支持light或者dark两种样式 必须引入markRaw 取消数据响应
    myChart.value = markRaw(echarts.init(chartDom, "light"));

    // 设置图表得options

    // 指定图表的配置项和数据
    // 指定图表的配置项和数据
    let options = {
      title: {
        text: "某地区蒸发量和降水量",
        subtext: "纯属虚构",
        textAlign: "center", //居中方式 可以是left center right
        subtext: "副标题",
        x: "center",
        subtextStyle: {
          color: "red",
        },
      },
      tooltip: {
        trigger: "axis",
        //trigger: 'item'
      },
      legend: {
        data: ["最高", "最低"],
      },
      toolbox: {
        show: true,
        orient: "horizontal", //布局方式默认为水平布局,可选'vertical'
        x: "right", //也可以是具体的数值或者是center,right
        y: "top", //也可以是center,left也可以是数值
        color: ["#le90ff", "#22bb22", "#4b0082", "#d2691e"],
        backgroundColor: "#ccc",
        borderWidth: 0,
        padding: 5,
        showTitle: true,
        feature: {
          mark: {
            show: true,
            title: {
              mark: "辅助线-开关",
              markUndo: "辅助线-删除",
              markClear: "辅助线-清空",
            },
            lineStyle: {
              width: 1,
              color: "#1e90ff",
              type: "dashed",
            },
          },

          restore: { show: true },
          saveAsImage: { show: true },
          dataZoom: {
            show: true,
            title: {
              dataZoom: "区域缩放 ",
              dataZoomReset: "区域缩放-后退",
            },
          },
          //数据表格
          dataView: {
            show: true,
            title: "数据视图",
            readOnly: true,
            lang: ["数据视图", "关闭", "刷新"],
            optionToContent: function (opt) {
              console.log(opt);
              var axisData = opt.xAxis[0].data;
              var series = opt.series;
              var table =
                '<table style="width:100%;text-align:center"></tbody><tr>' +
                "<td>时间</td>" +
                "<td>" +
                series[0].name +
                "</td>" +
                "<td>" +
                series[1].name +
                "</td>" +
                "</tr>";
              for (var i = 0; i < axisData.length; i++) {
                table +=
                  "<tr>" +
                  "<td>" +
                  axisData[i] +
                  "</td>" +
                  "<td>" +
                  series[0].data[i] +
                  "</td>" +
                  "<td>" +
                  series[1].data[i] +
                  "</td>" +
                  "</tr>";
              }
              table += "</tbody></table>";

              return table;
            },
          },
          //数据图形选择
          magicType: {
            show: true,
            title: {
              line: "动态类型切换-折线图",
              bar: "动态类型切换-柱形图",
              stack: "动态类型切换-堆积",
              tiled: "动态类型切换-平铺",
            },
            type: ["line", "bar", "stack", "tiled"],
          },
          //还原
          restore: {
            show: true,
            title: "还原",
            color: "black",
          },
          saveAsImage: {
            show: true,
            title: "保存为图片",
            type: "jpeg",
            lang: ["点击本地保存"],
          },
        },
      },

      calculable: true,
      //数据缩放
      dataZoom: {
        show: true,
        realtime: true, //是否实时显示
        start: 10, //选择起始比例
        end: 80, //选择终结比例
      },
      xAxis: [
        {
          type: "category", //value time
          boundaryGap: false, //类目起始和结束两端空白策略，默认true留空,false则顶头
          data: (function () {
            var list = [];
            for (var i = 1; i <= 30; i++) {
              list.push("2013-03-" + i);
            }
            return list;
          })(), //立即执行匿名函数
        },
      ],
      yAxis: [
        {
          type: "value",
          // boundaryGap: [0.1, 0.1], //坐标轴两端空白策略，数组内数值代表百分比
          splitNumber: 4, // 数值轴，分割段数 ，默认为5
        },
      ],
      series: [
        {
          name: "最高",
          type: "line",
          data: (function () {
            var list = [];
            for (var i = 1; i <= 30; i++) {
              list.push(Math.round(Math.random() * 30));
            }
            return list;
          })(),
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "最低",
          type: "line",
          data: (function () {
            var list = [];
            for (var i = 1; i <= 30; i++) {
              list.push(Math.round(Math.random() * 10));
            }
            return list;
          })(),
          markPoint: {
            data: [
              {
                name: "随机点",
                value: 9,
                xAxis: 10,
                yAxis: 13,
                symbolSize: 18,
              },
              { name: "年最低", value: 22.3, xAxis: 11, yAxis: 23 },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    };
    myChart.value.setOption(options);
    // 监听改变大小
    window.addEventListener("resize", function () {
      myChart.value.resize();
    });
  };
</script>

<style lang="scss" scoped>
  .page {
    overflow: hidden;
    .title {
      font-size: 16px;
      color: black;
      margin: 0 auto;
      text-align: center;
      font-size: 36px;
    }
    #main {
      width: 1000px;
      height: 400px;
      border: 1px solid #ccc;
      margin: 0 auto;
      margin-top: 20px;
    }
  }
</style>