echart-折线图

示例图： 

 

 代码：

 封装为组件 right-top.vue

使用props传值

由于 props 是单向数据流的，它是只能从父组件传递到子组件的，而子组件是无法更改 props 的值的，只能由父组件来修改。这样就保证了组件的数据传递不会出现混乱和错乱的情况。

关于echarts的option配置可以看下官网的配置项手册

<script setup lang="ts">
import { ref,onMounted,watch} from "vue";
import { currentGET } from "@/api";
import {graphic} from "echarts/core"

const option = ref({});
//数据
const props = defineProps({//props声明
  data: {
    type: Object, // 对象类型
    required: true, // 必须的
    default: () => ({ // 默认值为一个包含三个空数组的对象
      timeArray: [],
      billInBoundCountArray:[],
      billOutBoundCountArray:[]
    })
  }
})


onMounted(() => {
  Chart();
  console.log("要看这个 11111111",props.data)
});


const setOption =async (xData:any[], yData:any[], yData2:any[]) => {
  option.value = {
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        grid: {
          //布局
          show: true,
          left: "10px",
          right: "30px",
          bottom: "10px",
          top: "32px",
          containLabel: true,
          borderColor: "#1F63A3",
        },
        series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            symbol: "none", //去除点
            name: "字段一",
            color: "rgba(252,144,16,.7)",
            areaStyle: {
                //右，下，左，上
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(252,144,16,.7)",//向上渐变色
                    },
                    {
                      offset: 1,
                      color: "rgba(252,144,16,.0)",//下面颜色
                    },
                  ],
                  false
                ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    color: "#FC9010",
                    backgroundColor: "rgba(252,144,16,0.1)",
                    borderRadius: 6,
                    padding: [7, 14],
                    borderWidth: 0.5,
                    borderColor: "rgba(252,144,16,.5)",
                    formatter: "字段一：{c}",
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#FC9010",//最大点
                    shadowColor: "#FC9010",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
          {
            data: yData2,
            type: "line",
            smooth: true,
            symbol: "none", //去除点
            name: "字段二",
            color: "rgba(9,202,243,.7)",//线的颜色
            areaStyle: {
                //右，下，左，上
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(9,202,243,.7)",//向上渐变色
                    },
                    {
                      offset: 1,
                      color: "rgba(9,202,243,.0)",
                    },
                  ],
                  false
                ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    color: "#09CAF3",
                    backgroundColor: "rgba(9,202,243,0.1)",
                    borderRadius: 6,
                    borderColor: "rgba(9,202,243,.5)",
                    padding: [7, 14],
                    formatter: "字段二：{c}",
                    borderWidth: 0.5,
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#09CAF3",
                    shadowColor: "#09CAF3",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
        ],
      };
}
onMounted(()=>{

})
const chart = ref(null);
const Chart = () => {
  // 使用 getPie3D 函数生成的 option 配置
  //3、通过实例.setOptions（option）
  setOption(props.data.timeArray, props.data.billInTotalCountArray, props.data.billOutTotalCountArray);
}

//用于观察props.data属性的变化并在发生变化时调用rotatingPieChart函数。
watch(() => props.data, Chart)
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>

<style scoped lang="scss"></style>

父页面调用：

<ItemWrap class="contetn_left-bottom contetn_lr-item" title="折线图">
  <RightTop :data="data.RightTopData1"  v-if="!isLoading3" />
</ItemWrap>

数据样式：

const data = {
 
  RightTopData1:{
    timeArray: ["1-1", "1-2", "1-3","1-4", "1-5", "1-6","1-7", "1-8", "1-9","1-10", "1-11", "1-12","1-13", "1-14", "1-15"],//日期
    billOutTotalCountArray: [0.0, 0.0, 185,30, 200, 185,2, 200, 185,0.0, 0.0, 185,0.0, 0.0, 0.0],//字段一
    billInTotalCountArray: [100.0, 0.0, 800,500, 200, 185,1500.5, 200, 600,500, 1, 185,500, 200, 185],//字段二
  },
   }

参考： 

认识vue中的Props_vue props-CSDN博客

Documentation - Apache ECharts   

IofTV-Screen-Vue3: 🔥(IofTV-Screen Vue3版本)一个基于 vue3、vite、Echart 框架的物联网可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、数据滚动配置，内部图表自由替换，持续更新.... (gitee.com)