gas-injection/src/views/vent/home/configurable/components/gasInject/echartLineDate.vue

<template>
  <div class="echart-line" ref="echartLines"></div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts';

let props = defineProps({
  //图表配置项
  echartOption: {
    type: Object as any
  },
  //图表数据
  ecahrtData: {
    type: Object as any
  }
})
let echartLines = ref(null)

function getOption() {
  nextTick(() => {
    let myChart = echarts.init(echartLines.value);
    let option = {
      tooltip: props.echartOption.tooltip,
      grid: props.echartOption.grid,
      legend: props.echartOption.legend,
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: 'rgba(4, 49, 79)',
          },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
          textStyle: {
            color: '#7ec7ff',
            padding: 5,
            fontSize: 12
          },
          formatter: function (data) {
            return data
          }
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: props.ecahrtData.xData
      }],
      yAxis:props.echartOption.yAxis,
      series: props.echartOption.series.map((el, index) => {
        return {
          name: el.name,
          type: el.type,
          symbol: el.symbol, // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: el.showAllSymbol,
          symbolSize: el.symbolSize,
          smooth: el.smooth,
          lineStyle: el.lineStyle,
          itemStyle: el.itemStyle,
          areaStyle: el.areaStyle,
          data: props.ecahrtData[el.data]
        }
      })
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}
onMounted(() => {
  getOption()
})
</script>

<style lang="less" scoped>
.echart-line {
  width: 100%;
  height: 100%;
}
</style>