uniapp vue3 使用echarts绘制图表 柱状图等

部分内容AI总结

Uniapp 使用 Vue3 和 ECharts 组件的总结

在 Uniapp 中使用 Vue3 和 ECharts 进行数据可视化是一种常见需求。以下将详细介绍如何在 Uniapp 项目中安装 ECharts 插件、在 main.js 中挂载 ECharts 以及一个简单的示例 demo。

---

1. 下载 ECharts 插件

在 Uniapp 中，使用 ECharts 进行数据可视化需要先安装 ECharts 相关插件。

• 步骤：
  1. 打开项目目录，使用以下命令安装 ECharts 插件：

     pnpm add echarts
     

  2. 导入自定义eharts插件

2. 在 main.js 中挂载 ECharts

在 Vue3 项目中，通常需要在 main.js 中挂载全局的 ECharts 对象，这样可以在项目的任何地方使用它。

• 步骤：

1. 打开 main.js 文件，导入 ECharts 并进行挂载：

	//关键代码const echarts = require('./static/echarts.min');app.config.globalProperties.$echarts = echarts

2. 现在，你可以在项目的任何组件中通过 this.$echarts 访问 ECharts 对象。

3. 示例 Demo：使用 ECharts 绘制图表

在 Vue3 组件中，结合 Uniapp 和 ECharts，展示一个简单的图表。

• 步骤：
  1. 创建一个新的组件 EChartDemo.vue，或者直接在 App.vue 中使用。
  2. 使用 onMounted 生命周期函数初始化图表。

<template><view><view class="title">ehcharts示例</view><view><LEchart class="echart" ref="chart" @finished="init"></LEchart></view><view><LEchart class="echart-circle" ref="chartCircle" @finished="initCircle"></LEchart></view></view>
</template><script setup>import {getCurrentInstance} from 'vue'import LEchart from '@/components/l-echart/l-echart.vue'const instance = getCurrentInstance()const echarts = instance.appContext.config.globalProperties.$echarts;console.log("echarts", echarts)import {onMounted,reactive,ref} from "vue"let chart = ref();const state = reactive({option: {},})state.option = {legend: {show: true,data: []},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},grid: {left: '3%',right: '8%',top: '15%',bottom: '5%',containLabel: true},xAxis: {type: 'category',data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 1, 4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],axisLabel: {// inside: true,// color: '#fff'},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#83bff6'}},z: 10},yAxis: {type: 'value',axisLine: {show: true,lineStyle: {color: '#83bff6'}},axisTick: {show: false},// axisLabel: {//   color: '#999'// },splitLine: {show: true,lineStyle: {type: 'dashed',color: '#83bff6'}}},series: [{data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, , ],type: "bar",itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#83bff6'},{offset: 0.5,color: '#188df0'},{offset: 1,color: '#188df0'}])},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#2378f7'},{offset: 0.7,color: '#2378f7'},{offset: 1,color: '#83bff6'}])}},areaStyle: {show: true,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#188df0'},{offset: 1,color: '#fff'}])},}],color: ['#83bff6']}let chartCircle = ref();const stateCircle = reactive({option: {series: [{type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 70,name: '70%'},{value: 30,name: '30%'}]}]}});onMounted(() => {chart.value.init(echarts, chart => {chart.setOption(state.option);});chartCircle.value.init(echarts, chart => {chart.setOption(stateCircle.option);});});// 渲染完成const init = () => {console.log("渲染完成");}const initCircle = () => {console.log("渲染完成circle");}
</script><style scopedlang='scss' scoped>.echart {width: 100%;height: 300px;}.title {text-align: center;}.echart-circle {width: 100%;height: 200px;}
</style>

• 关键点解析：
  1. 图表容器：使用 ref 来创建对 DOM 元素的引用，chartContainer 是图表绘制的目标容器。
  2. onMounted 生命周期：在组件挂载时初始化 ECharts 实例并调用 setOption 方法配置图表。
  3. ECharts 配置项：option 定义了图表的标题、坐标轴和数据。

---

4. 总结

• 安装插件：使用 npm 安装 echarts 依赖。
• 全局挂载：在 main.js 中将 ECharts 挂载到 Vue 的全局属性，以便在各个组件中使用。
• 组件示例：在 Vue3 组件中，结合 onMounted 生命周期，使用 ECharts 绘制可视化图表。

通过这个步骤，你可以在 Uniapp 中轻松地集成 ECharts，结合 Vue3 的响应式特性，实现强大的数据可视化功能。