vue3.0 使用echarts完成图表展示

3.0使用echarts
首先跟vue2.x版本没有太大区别使用npm 或者 yarn 安装echart
例：npm install echarts --save
成功后在main.js 进行挂载配置

vue2.0 如下：

import Echarts from "echarts";
Vue.prototype.$echarts = Echarts;

vue3.0 如下:

import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';

const AppBase = createApp(App);
AppBase.config.globalProperties.echarts = echarts;
AppBase.mount('#app');

因为vue3.0底层改写了对象一些方法属性都变成了静态方法。所以对应的调用方式也放生了变化。详细请阅读vue3.0 底层源码 跟官方文档
https://vue3js.cn/docs/zh/api...

下面组件采用vue3.0 组合式api 方式实现

<template>
  <div id="mycharts" ref="myRef" class="chart-box" />
</template>
<script lang="js">
import { defineComponent, getCurrentInstance, ref, onMounted } from 'vue';
export default defineComponent({
  name: 'echarts',
  setup() {
    const { ctx } = getCurrentInstance();
    const myRef = ref(null);

const initT = () => {
  const myChart = ctx.echarts.init(document.getElementById('mycharts'));
  console.log(myChart);
  myChart.setOption({
    title: {
      text: '本月数据统计'
    },
    tooltip: {},
    legend: {
      data: ['任务数量']
    },
    xAxis: {
      data: ['javascript', 'vue', 'ts', 'react', 'nginx']
    },
    yAxis: {},
    series: [
      {
        name: '任务数量',
        type: 'bar',
        data: [5, 20, 36, 10, 10]
      }
    ]
  });
};

onMounted(() => {
  initT();
});
return {
  myRef
};
  }
});
</script>

<style lang="css" scoped>


img{
  width: 400px;
  height: 400px;
  background: red;
}
.chart-box{
  width: 600px;
  height: 600px;
}
</style>

最后附上成功截图