vue3使用echarts

本地安装Echarts

npm install echarts --save有淘宝镜像的可以选择  (安装速度快)
cnpm install echarts --save

新建一个echarts.js文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,
} from "echarts/components";// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer,LineChart,
]);// 导出
export default echarts;

创建好的js文件全局引入到main.js内

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"import echarts from './utils/echarts';const app = createApp(App)app.config.globalProperties.$echarts = echartsapp.use(router)
app.use(pinia)app.mount('#app')

这里需要注意:（组件名大写首字母）
按需引入时：import { LineChart } from “echarts/charts”

<script setup>逻辑内使用echart

因为setup中没有this,而且这时候还没有渲染.所以,在setup中,也可以使用provide/inject把echarts引入进来. 在根组件里引入echarts

// App.vue文件内插入生产者provide <script setup>
import * as echarts from "echarts";
import { provide } from "vue";
provide("echarts", echarts);
</script><template><router-view></router-view>
</template><style>
body {margin: 0px;
}
</style>

在需要的页面中inject

<template><div><div id="main"></div><div id="maychar"></div></div>
</template><script lang="js">
import { defineComponent, onMounted, inject } from "vue"; // 主要
export default defineComponent({setup() {onMounted(() => {change();changetype();});let echarts = inject("echarts"); // 主要// 基本柱形图const change = () => {const chartBox = echarts.init(document.getElementById("main")); // 主要const option = {xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {},series: [{type: "bar",data: [23, 24, 18, 25, 27, 28, 25],},],};chartBox.setOption(option);// 根据页面大小自动响应图表大小window.addEventListener("resize", function () {chartBox.resize();});};// 折线图const changetype = () => {// 获取组件实例const machart = echarts.init(document.getElementById("maychar"));// 设置配置项const option = {xAxis: {data: ["A", "B", "C", "D", "E"],},yAxis: {},series: [{data: [10, 22, 28, 43, 49],type: "line",stack: "x",},{data: [5, 4, 3, 5, 10],type: "line",stack: "x",},],};// 复制machart.setOption(option);// 根据页面大小自动响应图表大小window.addEventListener("resize", function () {machart.resize();});};return {changetype,};},
});
</script><style lang="scss" scoped>
#main {min-width: 31.25rem;min-height: 31.25rem;// max-height: 500px;
}#maychar {max-height: 500px;// max-height: 400px;height: 500px;
}
</style>

达到统一管理引入的echarts效果

vue3使用echarts相关推荐

[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
vue3+ts+echarts 实现svg渲染地图
vue3+ts+echarts 实现svg渲染地图+省市联动公司打算地图使用svg渲染,就做了个小demo,这是最后实现的效果. http://datav.aliyun.com/portal/sch ...
echarts vue 柱状图实例_「源码学习」适用于 Vue3 的 ECharts 包装组件
距离 Vue3 发布已经有近一周的时间,不知道大家源码都学习的怎么样了呢?今天 Gitee 为开发者们推荐一个新的学习资源,就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts ...
Vue3.0 + Echarts 实现地区人口数量分布展示
需求: 按照人口数量密集度,颜色由浅到深展示实现: 基于现有的Vue3.0+4.5.13Cli框架,安装Echarts npm install echarts@4.9.0 --save 安装成功后, ...
解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
一.实现效果: Vue3-Vite-Ts数据大屏二.vue3项目构建: 前言:随着vue2官宣年底停止维护不在提供解决问题的帮助后,vue3+ts+vite大家已经都开始用了,最近也在学习,并结合D ...
vue3 使用echarts和百度地图
文章目录前言一.使用echarts 1. 安装echarts 2. echarts中使用百度地图 2.1 引入百度地图 2.2 全部代码 2.3 结果 3 echarts使用geomap进行地图展 ...
vue3中ECharts快速入门
前言可视化就是把数据简单化直接明了显示数据的比例,增长趋势等等 1.官方echarts数据可视化 2.vue3中使用echarts的配置 3.简单的柱状图 1.官方echart数据可视化官方:A ...
西北乱跑娃 -- VUE3引入echarts
npm install echarts npm install echarts-wordcloud <template><div id="myChart" :st ...

vue3使用echarts

本地安装Echarts

新建一个echarts.js文件

创建好的js文件全局引入到main.js内

<script setup>逻辑内使用echart

在需要的页面中inject

vue3使用echarts相关推荐

最新文章

热门文章