形容 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>