在vue + ts 项目中引入echarts

第一种

indext.html中用script引入

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>

组件中调用方式

<script >
import { Component , Vue } from 'vue-property-decorator';
declare let echarts:any;  //要先声明
@Component
export default class about extends Vue{
  private mounted(): void{
      this.ech();
  };
  private ech(): void{
    let lineChart =echarts.init(document.getElementById('lineChart'));
 
}

第二种

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

在main.ts中添加如下代码

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

第三种-局部引用

import { Component, Vue} from 'vue-property-decorator';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const echarts = require('echarts');
@Component
export default class Welcome extends  Vue {

  public mounted() {
    const myChart = echarts.init(document.getElementById('main'));
    myChart.setOption( {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(220, 220, 220, 0.8)'
        }
      }]
    })
  }

}