Vue3使用ECharts 绘制天气预报折线图

Apache ECharts

安装

 npm i -S vue-echarts echarts

引入

 import { defineProps, onMounted, ref } from "vue";
 import * as echarts from 'echarts';

使用

 <template>
   <div id="mychart" ref="chartRef"></div>
 </template>

 onMounted(() => {
   chartInstance = echarts.init(chartRef.value);
 ​
   // console.log("chart子组件接收: ", props.weatherData);
 ​
   // y轴范围
   const max = props.weatherData.reduce((maxItem, item) => item.max > maxItem.max ? item : maxItem, props.weatherData[0]).max;
   const min = props.weatherData.reduce((minItem, item) => item.min < minItem.min ? item : minItem, props.weatherData[0]).min;
 ​
   // 配置项
   const options = {
     // 设置内边距
     grid: {
       x: 0,
       y: 0,
       x2: 0,
       y2: 0,
     },
     xAxis: {
       type: 'category',
       data: props.weatherData.map((item) => item.dayWeek),
       // 取消刻度线
       axisTick: {
         show: false,
       },
       // 取消x轴
       axisLine: {
         show: false,
       },
       // 取消坐标值
       axisLabel: {
         show: false,
       },
     },
     yAxis: {
       show: false,
       type: 'value',
       // 设置y轴范围
       min: max + 1,
       max: min - 2,
     },
     series: [
       {
         data: props.weatherData.map((item) => item.max),
         type: 'line',
         showSymbol: true,
         // smooth: true, // 曲线
         // 显示温度
         label: {
           show: true,
           position: 'bottom',
           formatter: '{c} °C',
         },
       },
       {
         data: props.weatherData.map((item) => item.min),
         type: 'line',
         showSymbol: true,
         // smooth: true,
         label: {
           show: true,
           position: 'bottom',
           formatter: '{c} °C',
         },
       },
     ],
   };
 ​
   // 设置图表配置项
   chartInstance.setOption(options);
 });

子组件配置

 const props = defineProps({
   weatherData: {
     type: Array,
     default: () => [],
   },
 });
 ​
 const chartRef = ref(null);
 let chartInstance = null;