当前位置: 首页 > Web前端 > HTML

Vue3.0使用Echarts图表(quick、vue-echarts、TypeScript)

时间:2023-03-29 11:43:21 HTML

Echarts官网介绍Echarts的使用和配置。在vue项目中使用vue-echarts库,必须下载echarts库。下载npminstallechartsvue-echarts指定版本下载npminstallecharts@5.4.1vue-echarts@6.5.1配置main.ts关键代码import'echarts';从'vue-echarts'导入ECharts;constapp=createApp(App);app.component('VueEcharts',ECharts).mount('#app');完成配置importVue,{createApp}from'vue';importrouterfrom'./router';import{createPinia}from'pinia';importaxiosfrom'axios';importi18nfrom'./lang';importAppfrom'。/应用程序。vue';importAntdfrom'ant-design-vue';import'ant-design-vue/dist/antd.css';import'echarts';importEChartsfrom'vue-echarts';constapp=createApp(App);app.use(createPinia()).component('VueEcharts',ECharts).use(router).use(Antd).use(i18n).mount('#app');app.config.globalProperties.$http=axios;组件使用Father.vue(父组件)dEcharts.vue(subcomponent).chartwidth:50%height:300px