uni-app 使用echarts

### 如何在uni-app中集成和使用ECharts #### 安装依赖 为了在uni-app项目中使用ECharts，首先需要安装ECharts库。可以通过`pnpm`或者`npm`来完成这一操作[^2]。 ```bash pnpm add echarts # 或者 npm install echarts ``` 如果不想通过包管理工具安装，也可以直接引入插件中的`echarts.min.js`文件作为替代方案。 --- #### 创建ECharts组件 创建一个新的Vue组件用于封装ECharts逻辑。以下是基本实现方式： 1. **模板部分** 使用一个`<canvas>`标签或`<view>`容器绑定样式属性以便后续挂载图表实例。 ```html <template> <view class="chart-container"> <canvas canvas-id="myChart"></canvas> <!-- 如果需要支持微信小程序 --> <div id="main" style="width: 100%; height: 400px;"></div> <!-- H5 和 App 平台 --> </view> </template> ``` 2. **脚本部分** 初始化并渲染ECharts图表，在`mounted()`生命周期函数中调用初始化方法。 ```javascript import * as echarts from 'echarts'; export default { data() { return { chartInstance: null, }; }, mounted() { this.initChart(); }, methods: { initChart() { const chartDom = document.getElementById('main'); if (!chartDom) return; this.chartInstance = echarts.init(chartDom); const option = { title: { text: '示例图表' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], }, ], }; this.chartInstance.setOption(option); }, }, onUnload() { if (this.chartInstance) { this.chartInstance.dispose(); // 销毁实例释放资源 } }, }; ``` 上述代码展示了如何在一个页面上加载柱状图，并设置了基础的数据结构以及交互选项[^1]。 --- #### 处理跨平台兼容性问题 由于不同端（H5、App、小程序）可能具有不同的特性，因此需要注意一些细节处理： - 对于**微信小程序**环境下的适配，推荐采用官方文档提到的方式——即利用`<canvas>`标签配合自定义画布绘制图表[^3]。 - Android设备可能存在字体显示异常等问题；此时可尝试调整CSS样式规则或更新至最新版本SDK解决此类情况。 --- #### 封装通用组件 当多个地方都需要嵌入相同类型的图形时，则建议抽离出独立的公共模块供重复调用。下面给出简化版例子说明过程： ```vue <!-- EchartsComponent.vue --> <template> <div ref="chartRef" :style="{ width: '100%', height }"></div> </template> <script lang="ts"> import { defineComponent, PropType, ref, watchEffect } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ props: { options: Object as PropType<any>, height: String, }, setup(props) { const chartRef = ref<HTMLDivElement | null>(null); let myChart: any = null; watchEffect(() => { if (props.options && chartRef.value) { if (!myChart) { myChart = echarts.init(chartRef.value); // 初始化图表对象 } myChart.clear(); // 清除旧数据 myChart.setOption(props.options); // 设置新配置项 } }); return { chartRef }; }, }); </script> ``` 这样做的好处在于减少冗余代码量的同时提高了维护效率。 --- ### 注意事项 - 确保网络请求获取到动态数据后再执行绘图动作以免报错； - 不同分辨率屏幕下需考虑响应式布局设计使得视觉效果更佳统一美观。