vue-cli3 + TypeScript 中使用Echarts

最新推荐文章于 2025-07-13 23:32:21 发布

原创

最新推荐文章于 2025-07-13 23:32:21 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文档介绍了如何在Vue CLI3项目中配合TypeScript使用ECharts。首先，你需要通过安装过程将ECharts引入项目。接着，你可以直接在代码中require('echarts')来获取ECharts实例。要深入了解如何在Webpack环境中使用ECharts，可以参考官方教程：https://echarts.baidu.com/tutorial.html#在 webpack 中使用 ECharts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli3 + TypeScript 中使用Echarts

安装echarts

npm install echarts --save
npm install @types/echarts

直接在项目代码中 require(‘echarts’) 得到 ECharts。

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component{}
export default class DataView extends Vue {
  drawChart() {
    var echarts = require("echarts");
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例"
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
  mounted() {
    this.drawChart();
  }
}
</script>