uniapp H5 echarts

### 如何在 UniApp 的 H5 环境下集成和使用 ECharts

#### 准备工作
为了能够在 UniApp 中顺利使用 ECharts 进行数据可视化，在开始之前需确保已安装好必要的依赖工具并创建了一个新的 UniApp 项目。

#### 安装 ECharts 插件
通过 npm 或者 yarn 来安装 echarts-for-wechat，这是专门为微信小程序设计的 ECharts 版本，但在 UniApp 下同样适用。对于 H5 平台来说，这一步骤能够简化引入过程并且保持良好的性能表现[^2]。

npm install echarts --save

#### 创建组件文件夹结构
建议新建一个名为 `components` 文件夹用于存放自定义组件，其中再建立子目录来放置与 ECharts 相关的内容，比如命名为 `u-charts`。这样的组织方式有助于提高项目的可维护性和扩展性。

#### 编写 Vue 组件代码
下面展示的是一个简单的例子，说明怎样在一个 .vue 文件里加载 ECharts 图表：

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "ChartComponent",
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: 'ECharts 示例'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    option && myChart.setOption(option);
  }
}
</script>

此段代码展示了如何初始化 ECharts 实例以及设置基本配置项以显示柱状图[^1]。

#### 配置页面路由
最后不要忘记把新创建好的图表组件注册到 pages.json 中作为某个页面的一部分，这样才能让用户访问到该页面时看到对应的图表效果。