import echarts from ‘echarts‘标红报错

当vue-cli+TypeScript 中使用Echarts时main.ts一直报错

之前一直按照

npm install echarts --save

然后在main.ts中引用一直标红

查了好多方法原来是少了一句安装语句

npm install @types/echarts

加上这句就好了

完整的实例

安装

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

组件中引用

<script lang="ts">


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>