vue3+ts: 使用echarts图表简单示例

最新推荐文章于 2024-06-26 14:23:37 发布

杨了仰头

最新推荐文章于 2024-06-26 14:23:37 发布

阅读量281

点赞数

文章标签： echarts javascript vue

本文链接：https://blog.csdn.net/weixin_59769277/article/details/134707236

版权

以简单的折线图为例

下载echarts：npm install echarts --save

根据ref获取dom用法：

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

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

const chartRef: Ref<HTMLElement | null> = ref(null);
let chart: echarts.ECharts 
onMounted(() => {
  chart = echarts.init(chartRef.value as HTMLElement);
  updateChart();
})

const updateChart = () => {
  const option: EChartsOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  option && chart.setOption(option);
}
</script>

<style scoped>
#chart {
  width: 600px;
  height: 400px;
}
</style>

原始方法获取dom用法

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

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption

onMounted(() => {
  chartFn();
})

const chartFn = () => {
  // 获取dom，断言HTMLElement类型，否则会报错
  const chartEle: HTMLElement = document.getElementById('chart') as HTMLElement;
  const chart = echarts.init(chartEle);
  const option: EChartsOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  option && chart.setOption(option);
}
</script>

<style scoped>
#chart {
  width: 600px;
  height: 400px;
}
</style>