uni echarts折线树图

### uni-app 中使用 ECharts 创建折线树图

在 `uni-app` 中集成并使用 ECharts 实现折线树图主要涉及几个方面的工作：安装依赖库、初始化图表实例以及配置数据源。

#### 安装 echarts-for-weixin 组件
为了能够在小程序环境中顺利运行 ECharts 图表，推荐使用专门适配微信小程序环境的版本——echarts-for-weixin (efw)[^1]。通过 npm 或者手动下载的方式引入该组件到项目当中。

#### 初始化页面布局结构
定义好 HTML 结构，在合适的位置预留出用于展示图表的空间容器，并设置固定的高度宽度以便后续渲染图形时能够正常显示[^2]。

<template>
  <view class="charts-box">
    <canvas canvas-id="treeChart" id="treeChart"></canvas>
  </view>
</template>

<style scoped>
.charts-box {
  width: 750rpx;
  height: 600rpx;
}
</style>

#### 加载 efw 库文件 & 配置 chart option
确保已经成功加载了必要的 JavaScript 文件之后，就可以按照官方文档说明来编写相应的选项参数对象 treeOption 来描述想要绘制的具体样式效果了[^3]。

import * as wx from 'weapp-adapter';
import * as echarts from '/components/ec-canvas/echarts';

export default {
  data() {
    return {
      ec: {}
    };
  },
  onReady() {
    this.initTreeChart();
  },
  methods: {
    initTreeChart() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#treeChart').fields({ node: true, size: true }).exec((res) => {
        let canvas = res[0].node;
        let ctx = canvas.getContext('2d');
        
        // Initialize the instance of ECharts with given DOM element.
        var myChart = echarts.init(canvas, null, { renderer: 'canvas' });

        // Specify the configuration items and data for the chart to be displayed here...
        var treeOption = {
          title: {
            text: 'A Tree Chart Example'
          },
          series : [
            {
              type: "lines",
              coordinateSystem: 'cartesian2d',
              lineStyle: {
                color: '#5470C6',
                opacity: 0.9,
                width: 2
              }
            }
          ]
        };

        // Set options after initialization is complete.
        myChart.setOption(treeOption);

        // Keep a reference so that it can be updated later if needed.
        this.ec.chart = myChart;
      });
    }
  }
};