Echarts--制作正玄函数形式的Echarts图

父组件

<template>
  <div>
//这是一个弹出框
    <a-modal :visible="visible" @cancel="close" width="80%">
      <div class="check-content">
        <div style="height: 500px">
          <line-chart :value="lineData" ref="lineitemcard" />
        </div>
      </div>
      <template #title>
        <span class="check-title">动作电流波形</span>
      </template>
      <template #footer>
       
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import LineChart from '../chart/LineChart.vue'
const lineData = ref<any>([])

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  id: {
    type: Number
  },
  refersh: {
    type: Function
  }
})

// 保存
const formRef = ref<any>()
const emit = defineEmits(['update:visible', 'update:rowId'])

const close = () => {
  emit('update:rowId', 0)
  formRef.value?.resetFields()
  emit('update:visible', false)
}

onMounted(() => {
})

</script>

<style lang="less" scoped>
.check-content {
  width: 100%;
  height: 100%;

  .check {}
}

.check-title {
  font-size: 16px;
  // font-weight: bold;
  color: #000000;
}
</style>
<style>
:deep(.ant-form-item) {
  margin-bottom: 0px !important;
}
</style>

波形电流的组件

<template>
  <div>
    <div ref="line" class="echarts" :style="{ width: '100%', height: '100%' }"></div>

  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { computed, onMounted, ref, watch } from 'vue'
const props = defineProps({
  value:{
    type:Array,
    default:[]
  }
})
let myChart: any = ref()
const line = ref()
const inits = () => {
    // 基于准备好的dom，初始化echarts实例 
    myChart = echarts.init(line.value)
    let option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            //   data: ['个体风险预测', '群体风险预测'],
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true,
        // },
        dataZoom: [
            {
                type: 'slider', // 使用滑块类型的dataZoom
                start: 0, // dataZoom滑块的起始位置，为0表示一开始显示全部数据
                end: 100, // dataZoom滑块的结束位置，为100表示一开始显示全部数据
            },
            {
                type: 'inside', // 允许使用鼠标滚轮或触摸板进行缩放
                start: 0, // 同上
                end: 80, // 同上
            }
        ],
        xAxis: {
            type: 'value',
            // name: '相位(°)',
            interval: 90,  //坐标轴刻度标签的显示间隔
            min: 0,
            max: 3600,
        },
        yAxis: [
            //左边y轴
            {
                type: 'value',
                // name: '幅值（dB）',
                min: -10, // 最小值
                max: 70,
                interval: 40,
            },
        ],
        series: [
            {
                type: 'line',
                showSymbol: false,
                clip: true,
                data: generateData()
            },
        ],
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}

onMounted(() => {
    setTimeout(() => {

        inits()
        // 屏幕尺寸改变是调整echart尺寸
        window.addEventListener('resize', () => {
            myChart?.resize()
        })
    }, 1000);
})

watch(() => props.value, (newVal, oldVal) => {
    if (newVal) {
        inits()
    }
}
)

function func(x) {
    x /= 57.2;
    return Math.sin(x) * 40 + 30;
}
function generateData() {
    let data = [];
    for (let i = 0; i <= 3600; i += 0.1) {
        data.push([i, func(i)]);
    }
    return data;
}

</script>

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