vue3中如何使用echarts5,超详细!!!

前言

vue3已经出来一年之久了,现今开发也经常用到,那么vue3和echarts5如何结合呢?话不多说,上菜!

使用

安装echarts

npm install echarts --save

创建DOM元素,注意一定javascript数据类型要有高度

<div id="main"></div>

全部导入

<script>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
export default {
setup() {
onMounted(() => {
// 获取DOM元素并且进行初始化
var myChart = echarts.init(document.getElementById('main'));
// 创建图标
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
})
})
}
}
</script>

局部导入

部分多余重复引入javascript数据类型可以直接提到mian.js中

<script>
import { onMounted } from 'vue'
// 核心模块 提供必要的一些方法 如init
import * as echarts from 'echarts/core'
// 引入柱状图
import { BarChart } from 'echarts/charts'
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components'
// 标签自动布局,全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
// 注册必要的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
const Block = getAsyncComponent('views/Login')
export default {
name: 'Error',
components: {
[Empty.name]: Empty,
Block
},
setup () {
onMounted(() => {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
})
})
}
}
</script>

如何找到图表对应的组件名

以柱形图为例,echarts官网中点击柱状图后,旁边有缩写bar,那么他的组件名则是 BarChart

vue3中如何使用echarts5,超详细!!!


引入该组件

import { BarChart } from 'echarts/charts'