Vue+TypeScipt+Echarts完美解决报错问题 + Eslint关闭require检查

本文链接：https://blog.csdn.net/qq_41043722/article/details/111666780

该博客介绍在TypeScript+Vue项目中引用ECharts的方法。首先需安装echarts和@types/echarts两个包，分别作为工程依赖和声明依赖；还给出完整代码并强调关注注释；最后提到要关闭ESlint对require的检查。

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

一、先安装两个包

在typescript+Vue的项目中引用echarts，为了加强引用，引入echarts和@types/echarts两个包，一个是工程依赖，一个是声明依赖。

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

二、完整代码，请自行检查，重点在注释

<template>
  <div ref="chart" style="width:500px;height:500px"></div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
//引入echarts方法：第一种 推荐，别写错成import echarts from 'echarts'
import * as echarts from 'echarts';

//引入echarts方法：第二种 require 但要先在eslint关闭对require的检查，详细看下面
// const echarts = require('echarts');


@Component({components: {}})
export default class database extends Vue {
  private options = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  }
  private initCharts () {
  	//两种获取dom方法都可以
    let chart = this.$refs['chart']
    // let chart = document.getElementById('chart') 需定义id
    
    // 重点！！！！ init方法第一个需传入HTMLDivElement，自己ctrl+左键点开init方法看传参定义
    let myChart = echarts.init(chart as HTMLDivElement)
    
    // 绘制图表
    myChart.setOption(this.options);
  }
  
  //mounted钩子再调用initCharts()
  private mounted(){
    this.initCharts()
  }
}
</script>

<style scoped lang='scss'>

</style>

三、关闭ESlint对require检查

.eslintrc.js

module.exports = {
    "rules": {
        '@typescript-eslint/no-var-requires': 0 //加这一条，用import引入就不用加了
    }
};