小程序 echarts制作雷达图

微信小程序引入echars参考文档：

https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app

wxml:

<view class='box'>
<ec-canvas id="chart" canvas-id="chart" ec="{{ ec }}"  force-use-old-canvas="true"></ec-canvas>
</view>

js: 

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

let chart = null
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    // devicePixeRadio:dpr
  });
  canvas.setChart(chart);
 var option = {
   
    radar: {
    indicator: [
        { name: '三星', max: 6500 },
        { name: '苹果', max: 16000 },
        { name: 'VIVO', max: 30000 },
        { name: '魅族', max: 38000 },
        { name: 'one', max: 52000 },
        { name: '小米', max: 25000 },
        { name: '三星', max: 28000 },
        { name: '诺基亚', max: 35000 },
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending'
          }
        ]
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

module.exports={
  initChart: initChart
};harts';

Page({
    data: {
        ec: {
            onInit:initChart
        }
}

注意点：1、设置 force-use-old-canvas="true"可以提升渲染性能，解决非同层渲染问题，强烈建议开启。

2、存放雷达图的容器必须设置宽和高。

3、如果echarts本身层级太高，建议使用<cover-view>标签。

  详情参考echarts-for-weixinhttp://echarts-for-weixin