关于前端:vue-30-使用Echarts图表vite-vueecharts-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>