vue 3.0 Echarts基础版

<template>
  <div class="row p-0 m-0 text-white d-flex content">
    <div class="echarts">
        <div id="barchart" :style="{ width: '380px', height: '300px' }"></div>
 </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
  components: {},
  props: {
    arr: []
  },
  setup () {
    onMounted(() => {
      // var myChart = echarts.init(document.getElementById('barchart'))
      const myChart : any = echarts.init(document.getElementById('barchart') as any)
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts入门'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [13, 25, 46, 21, 40, 20]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    })
    return {
    }
  }
})
</script>

<style lang="less" scoped>

</style>
 npm install echarts --save
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts