iot-ui-plus/src/views/dashboard/components/LineChart.vue

<!--  线 + 柱混合图 -->
<template>
  <el-card>
    <template #header> 一网进回水 </template>
    <div :id="id" :class="className" :style="{ height, width }" />
  </el-card>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';

const props = defineProps({
  id: {
    type: String,
    default: 'lineChart'
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '200px',
    required: true
  },
  height: {
    type: String,
    default: '200px',
    required: true
  }
});

const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    right: 0,
    itemWidth: 11,
    itemHeight: 2,
    textStyle: {
      color: '#000',
      fontSize: 12
    }
  },
  grid: {
    top: '50',
    left: '0',
    right: '0',
    bottom: '0',
    containLabel: true
  },
  dataset: {
    source: [
      ['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
      ['日均温', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1, 52]
    ]
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      show: true,
      color: '#000'
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '温度(℃)',
      scale: true, //自适应
      nameTextStyle: {
        color: '#000',
        fontSize: 12,
        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLabel: {
        show: true,
        color: '#000'
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          //分割线
          color: '#306269',
          width: 1,
          opacity: 0.2
        }
      }
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      seriesLayoutBy: 'row',
      emphasis: {
        focus: 'series'
      }
    }
  ]
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
  chart.setOption(options);

  // 大小自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
});
</script>