vue 3.0 使用Echarts图表（vite, vue-echarts, TypeScript）

描述 Echarts官网

Echarts 使用和配置，

在 vue 项目中使用 vue-echarts 这个库, 必需下载 echarts 这个库

下载

npm install echarts vue-echarts

指定版本下载

npm install echarts@5.4.1 vue-echarts@6.5.1

配置

main.ts

关键代码

import 'echarts';
import ECharts from 'vue-echarts';

const app = createApp(App);
app.component('VueEcharts', ECharts).mount('#app');

完整配置

import Vue, { createApp } from 'vue';
import router from './router';
import { createPinia } from 'pinia';
import axios from 'axios';
import i18n from './lang';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import 'echarts';
import ECharts from 'vue-echarts';

const app = createApp(App);

app
  .use(createPinia())
  .component('VueEcharts', ECharts)
  .use(router)
  .use(Antd)
  .use(i18n)
  .mount('#app');

app.config.globalProperties.$http = axios;

组件使用

Father.vue(父组件)

<template>
  <div style="width: 500px; height: 400px">
    <d-echarts></d-echarts>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import DEcharts from './dEcharts.vue';

export default defineComponent({
  name: 'd-father',
  data() {
    return {};
  },
  setup() {
    return {};
  },
  props: [],
  methods: {},
  components: { DEcharts },
});
</script>
<style lang="sass" scoped>
</style>

dEcharts.vue(子组件)

<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
  />
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import ECharts from 'vue-echarts';

export default defineComponent({
  name: 'd-echarts',
  data() {
    return {
      option: {
        title: { text: 'Column Chart' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  setup() {
    return {};
  },
  props: [],
  methods: {},
  components: {
    'v-chart': ECharts,
  },
});
</script>
<style lang="sass" scoped>
.chart
  width: 50%
  height: 300px
</style>