vue3 使用echarts——折线图

最新推荐文章于 2024-09-06 17:08:59 发布

viceen

最新推荐文章于 2024-09-06 17:08:59 发布

阅读量7.1k

点赞数 3

分类专栏： vue3+ts-运维文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/121391275

版权

vue3+ts-运维专栏收录该内容

87 篇文章 11 订阅

订阅专栏

vue3 使用echarts——折线图

效果

在这里插入图片描述

使用流程

1、安包

cnpm install echarts --save

2、页面使用

index.vue

<template>
  <div id="myChart123" :style="{width: '1500px', height: '550px'}"></div>
</template>

<script lang="ts">
// 引入echarts
import * as echarts from 'echarts'
import {onMounted} from "vue";

export default {
  setup() {
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("myChart123"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          data: ["4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"]
        },
        yAxis:{},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [8, 15, 31, 13, 15, 22, 11]
          }
        ]
      });
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
    });
  }
}
</script>