1. 安装

使用命令
npm install echarts --save
安装Echarts

2. main.js中引入

在main.js中加入以下

import * as echarts from 'echarts'

3. main.js中绑定全局变量

app.config.globalProperties.$echarts = echarts

4. 完整main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as echarts from 'echarts'const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.use(store)
app.use(router)
app.mount('#app')

4. 初始化

界面标签

<div id="chinaChart"></div>

组件中在mounted()钩子中通过以下方法初始化：

const myChart = this.$echarts.init(document.getElementById("chinaChart"));
// 绘制图表
myChart.setOption({title: {text: "ECharts 入门示例",},tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],
});

样式

#chinaChart{height: 600px;width: 100%;
}

5. 效果

Echarts：Vue3中使用Echarts相关推荐

vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
vue3中，echarts使用（四）02——柱状图之堆叠条形图-定制化封装切换tag标签组件封装title组件
vue3中,echarts使用(四)02--柱状图之堆叠条形图-定制化 & 封装切换tag标签组件 & 封装title组件效果代码 1.主页面 index.vue <temp ...
在vue3 中使用echarts
在SetUp中使用echarts 在setup中可以直接引入文件 import { onMounted } from "vue"; import * as echarts from ...
【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
vue3中ECharts快速入门
前言可视化就是把数据简单化直接明了显示数据的比例,增长趋势等等 1.官方echarts数据可视化 2.vue3中使用echarts的配置 3.简单的柱状图 1.官方echart数据可视化官方:A ...
Vue3+Cli4 中使用 Echarts 5
文章目录前言一.按需引入二.全局引入三.4小时血泪史 1.第一个困难 2.第二轮太阳总结前言最近在做这个项目,这也是驱使我探求Vue3和Echarts结合方法的原因,虽然还没做完,我挑一 ...
解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
【3d地图】vue3.0中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 3.引入到vue组件中总结前言之前我们已经 ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染前言一.按需引入 ECharts 图表和组件二.使用步骤 1.还是先上代码叭 2. 上实现效果 ! ...

Echarts：Vue3中使用Echarts

1. 安装

2. main.js中引入

3. main.js中绑定全局变量

4. 完整main.js

4. 初始化

5. 效果

Echarts：Vue3中使用Echarts相关推荐

最新文章

热门文章