vue+echarts实现天气预报

首先你需要安装echarts  我安装的是 "echarts": "^5.5.1" 这个版本，具体数据需要根据自己的情况通过组件传值自行处理，这里只是一个静态数据做展示

父组件中

<template>
  <div>
    <Echarts/>
  </div>
</template>
<script setup>
import Echarts from '../../components/Echarts/Index.vue'
</script>

在Echarts文件夹下新建Index.vue作为子组件

<template>
  <div id="main"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

onMounted(() => {
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  let option;

  option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      splitLine: {
        show: false
      },
      // 去除坐标轴线
      axisLine: {
        show: false
      },
      // 去除坐标轴刻度
      axisTick: {
        show: false
      },
      // 隐藏坐标轴数值
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      splitLine: {
        show: false
      },
      // 去除坐标轴线
      axisLine: {
        show: false
      },
      // 去除坐标轴刻度
      axisTick: {
        show: false
      },
      // 隐藏坐标轴数值
      axisLabel: {
        show: false
      }
    },


    labelLine: {
      show: false,
    },
    series: [
      {
        name: '实虚线',
        type: 'line',
        smooth: true,
        symbolSize: 10,
        data: [23, 20, '', '', '', '', ''],
        lineStyle: {
          width: 3,
          type: 'dotted',
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c} °C'
        },
      },
      {
        name: '实虚线',
        type: 'line',
        smooth: true,
        symbolSize: 10,
        data: ['', 20, 25, 46, 26, 20, 18],
        lineStyle: {
          width: 2,
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c} °C'
          // 绝对的像素值
          // position: [30, 10],
        },
      },
      {
        name: '实线',
        type: 'line',
        smooth: false,
        data: [10, 11, 13, 11, 12, 12, 9],
        symbolSize: 10,
        lineStyle: {
          color: '#ffffff',
          width: 2,
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c} °C'
        },
      },
      {
        name: '虚线',
        type: 'line',
        smooth: false,
        data: [4, 6, 7, 2, 3, 4, 1],
        symbolSize: 10,
        lineStyle: {
          color: '#ffffff',
          width: 2,
          type: 'dashed'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c} °C'
        },
      },
    ]
  };
  option && myChart.setOption(option);
})
</script>

<style scoped>
#main {
  width: 100vw;
  height: 50vh;
  background: rgb(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
</style>