小程序中使用echarts，案例一：实现蜘蛛网（雷达图）

echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。

下载

echarts-for-weixin ec-canvas
如果你想使用最新版本的echarts可以将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换 echarts.js。需要注意的是新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas=“true” 的情况下，使用新的 Canvas 2d（默认），使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。

使用

在项目根目录下创建components文件夹，将下载的ec-canvas放在components文件夹中。

详情可参考echart官网

使用ec-canvas实现蜘蛛网案例：

在components中创建radar组件

<!--components/radar/radar.wxml-->
<view class="container">
  <ec-canvas class="ec-canvas" id="mychart-dom-radar" isUseNewCanvas="{{ true }}" canvas-id="mychart-radar" ec="{{ ec }}"></ec-canvas>
</view>

/* components/radar/radar.wxss */
.container,.ec-canvas{
  width: 100%;
  height: 100%;
}

import * as echarts from '../ec-canvas/echarts';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // onInit: initChart,
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.data)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.data)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 数据监听器
   */
  observers: {
    'data': function(val){
      this.initchart(val)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(data){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-radar');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
        })
        // echart表格的内容配置
        var option = {
          backgroundColor: "#ffffff",
          xAxis: {
            show: false
          },
          yAxis: {
            show: false
          },
          radar: {
            // 雷达图每个指示器名称的配置项。
            axisName: {
              color: 'rgba(102, 102, 102, 1)',
              fontSize: 12,
              fontFamily: 'PingFangSC-Regular, PingFang SC',
              fontWeight: 400,
            },
            // 指示器名称和指示器轴的距离
            nameGap: 8,
            // 指示器轴的分割段数
            splitNumber: 4,
            // 坐标轴轴线
            axisLine: {
              lineStyle: {
                color: 'rgba(234, 234, 234, 1)',
                width: 1.5
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(234, 234, 234, 1)',
                width: 1.5
              }
            },
            splitArea: {
              areaStyle: {
                color: ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)']
              }
            },
            // 雷达器的指示器
            indicator: [{
              name: '指示器1',
              max: 4,
            },
            {
              name: '指示器2',
              max: 4,
            },
            {
              name: '指示器3',
              max: 4,
            },
            {
              name: '指示器4',
              max: 4,
            },
            {
              name: '指示器5',
              max: 4,
            },
            {
              name: '指示器6',
              max: 4,
            }
            ]
          },
          series: [{
            type: 'radar',
            symbol: 'none',
            data: [
              {
                value: data,
                lineStyle: {
                  color: "rgba(209, 189, 128, 1)",
                  width: 2,
                },
                areaStyle: {
                  color: "rgba(209, 189, 128, 0.3)"
                }
              }
            ]
          }]
        };
        chart.setOption(option);
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})

{
  "component": true,
  "usingComponents": {
    "ec-canvas": "/components/ec-canvas/ec-canvas"
  }
}

在页面中使用蜘蛛网组件

<scroll-view style="height: 500px" scroll-y>
  <view class="radar">
    <my-radar data="{{radarData}}"></my-radar>
  </view>
</scroll-view>

/* pages/zxm-radar/index.wxss */
.radar{
  width: 570rpx;
  height: 570rpx;
}

// pages/zxm-radar/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    radarData: [1, 2, 4, 3, 2, 1]
  },

})

{
  "usingComponents": {
    "my-radar": "/components/radar/radar"
  }
}

在此过程中发现当页面中有滚动时，虽然使用了2d渲染，但在模拟器中图层会在上层，手机上在同层，目前没有想到较好的方式解决，欢迎小伙伴们留言交流探讨，至此实现蜘蛛网就结束了，当然你在项目中还是需要根据实际情形来处理。