uniapp整合echarts

### 如何在 UniApp 中整合 ECharts 实现数据可视化

#### 创建项目并安装依赖项
为了在 UniApp 项目中使用 ECharts，首先需要确保已正确设置开发环境。创建一个新的 UniApp 项目之后，在 `main.js` 文件里全局注册 ECharts 库。

// main.js
import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 引入 echarts 并挂载到 Vue 原型上以便组件内访问
import * as echarts from '@/wxcomponents/ec-canvas/echarts'; // 自定义路径可能有所不同
Vue.prototype.$echarts = echarts;

App.mpType = 'app';

const app = new Vue({
    ...App,
});
app.$mount();

#### 准备页面模板
编辑 `.vue` 页面文件来构建可视化的容器区域，并通过 `<ec-canvas>` 组件加载图表：

<!-- test.vue -->
<template>
  <view class="container">
    <!-- 使用 ec-canvas 来承载 echart 图形 -->
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.initChart(); // 初始化图表函数调用
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('mychart-dom-bar');
      let myChart = this.$echarts.init(chartDom); // 获取 DOM 节点后初始化 echarts 实例[^1]

      var option;
      
      // 配置项和数据显示逻辑...
      option = {
        title: { text: "简单柱状图示例", subtext: "" },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {type: 'value'},
        series: [{
            name:'销量',
            type:'bar',
            data:[120, 200, 150, 80, 70, 110, 130]
        }]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 400px;
}
</style>

这段代码展示了如何在一个名为 `test.vue` 的单文件组件中引入 ECharts 和绘制简单的条形图[^2]。注意这里使用的 `canvas-id` 属性用于区分不同的画布实例；而 `id` 则对应于 HTML 元素的选择器。

#### 数据驱动更新图表
当应用中的状态发生变化时（比如接收到新的 API 请求响应），应当重新渲染图表以反映最新的数据情况。这通常涉及到修改选项对象内的系列数据部分，并再次调用 `setOption()` 方法刷新视图。

---