ts如何使用echarts绘制折线图

最新推荐文章于 2024-06-21 16:34:48 发布

juvialoxer

最新推荐文章于 2024-06-21 16:34:48 发布

阅读量2.2k

点赞数

文章标签： typescript vue.js

本文链接：https://blog.csdn.net/juvialoxer/article/details/105850823

版权

本文介绍如何在Vue.js项目中利用TypeScript与ECharts库配合，详细步骤指导如何配置和使用ECharts来创建动态的折线图表，包括安装依赖、引入ECharts模块、在组件中初始化配置以及数据更新方法。

摘要由CSDN通过智能技术生成

<template lang="pug">
  div.echarts_line(
    ref="line"
  )
    
</template>
<script lang="ts">
import {
    Vue, Component, Watch, Prop } from "vue-property-decorator";
import echarts from "echarts";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";

@Component({
   })
export default class echarts_line extends Vue {
   
  @Prop() public readonly title!: string;

  public chartDom: any = null;
  public options: any = {
   
    title: {
   
      text: this.title
    },
    tooltip: