自己封装一个在Vue.js 和 ts 中使用 Echarts的组件

自己封装一个在Vue.js 和 ts 中使用 Echarts.

先把echarts给装了

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

然后根据官方文档来

先引入echarts:
最上面那步不装types/echarts会有报错提示

import echarts from 'echarts'

然后挂载在组件的DOM上:

<template>
  <div class="Charts">
    <div class="wrapper" ref="wrapper"></div>
  </div>
</template>

在ts里小改一下,在mounted时挂载在div上:

@Component
export default class Charts extends Vue {
    
    
mounted(){
    
    
const myChart = echarts.init(this.$refs.wrapper as HTMLDivElement);
  myChart.setOption({
    
    
    title: {
    
    
      text: 'ECharts 入门示例'
    },
    tooltip: {
    
    },
    xAxis: {
    
    
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
    
    },
    series: [{
    
    
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
  }
}

好了你会发现:
什么都没有

为啥???为啥???为啥???为啥???为啥???为啥???为啥???为啥???
整了半天,因为挂载div上,使用div的宽高要设置,不然无显示.
所以子组件 css还得设置一下

<style scoped lang="scss">
.wrapper {
    
    
  height: 400px;
}
</style>

然后就显示了