noob-components/packages/echarts/line/smoothed.vue

<template></template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";

const { state, commit, dispatch } = useStore();

const prop = defineProps({
  title: {
    type: String,
    default: "Smoothed Line",
  },
  name: {
    type: String,
  },
  xAxis: {
    type: Array,
    default: [],
  },
  data: {
    type: Array,
    default: [],
  },
  markLine: {
    type: String,
  },
  unit: {
    type: String,
  },
});

const options = {
  title: {
    text: "", //标题
    left: "center",
  },
  tooltip: {
    trigger: "axis",
    formatter:
      "{b}" +
      "<br>" +
      '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6"></span>' +
      '<span style="float:right;margin-left:10px;font-size:14px;color:#666;font-weight:900"/>' +
      "{c}" +
      "次",
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true,
      markLine: {
        symbol: "none", //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头
        label: {
          position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
        },
        data: [
          {
            silent: false, //鼠标悬停事件 true没有，false有
            lineStyle: {
              //警戒线的样式 ，虚实 颜色
              type: "solid", //样式  ‘solid’和'dotted'
              color: "#FA3934",
            },
            yAxis: 22, // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
          },
        ],
      },
    },
  ],
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>