vue3+TS中使用echarts图表库

一、安装echarts包

npm install echarts

二、vue3中使用TypeScript自定义数据方法

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

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

let y = reactive([150, 230, 224, 218, 135, 147, 260])
let x = reactive([1,2,3,4,5,6,7])

onMounted(()=>{
  const yi = echarts.init(document.getElementById('yi'))
  const option = {
    xAxis: {
      type: 'category',
      data: x
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: y,
        type: 'line'
      }
    ]
  };
  yi.setOption(option);
})



</script>

<style>
#yi{
  width: 100%;
  height: 400px;
}
</style>

三、效果