vue 5.0引入 eCharts

eChart 引入

在main.js中

import * as echarts from ‘echarts’
Vue.prototype.$echarts = echarts

在组件中

<template>
  <div class="money">
    source
    <div class="con">
      <div class="myChart" ref="mychart"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      myChart: null,
      option: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  },
  mounted () {
    this.myChart = this.$echarts.init(this.$refs.mychart)
    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(this.option)
    window.addEventListener('resize', () => { // 执行  图表大小随窗口大小改变而改变
      this.myChart.resize()
    })
  }
}
</script>

<style lang="less" scoped>
.money{

}
.myChart{
  width: 100%;
  height: 400px;
}
</style>```