小程序开发Echarts雷达图，一个模版搞定(详细注释)

1.首先封装一个初始化Echarts的js文件（提前下载好ec-canvas文件包，地址：github.com/ecomfe/echa… 。把该项目的ec-canvas文件夹拷贝到小程序项目目录中）

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

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option = {
    backgroundColor: "#ffffff",
    title: {
      text: '速度大比拼',//总标题
      left: 'center',
    },
    legend: {
      top:'8%', 
      left:'32%', 
      textStyle:{
        color:'#000000',
        fontSize: 15,
      },
      data: ['预算', '开销'],
    },
    radar: {
      radius: '50%',//雷达图大小缩放
      splitNumber: 7,//雷达圈数
      indicator: [{
          name: '食品',
          max: 130,//最大刻度
          min:-10,//最小刻度
          axisLabel: {show: true,showMinLabel: true,fontSize: 10,}//显示纵向这列数据刻度
        },
        {
          name: '玩具',
          max: 130,
        },
        {
          name: '服饰',
          max: 130,
        },
        {
          name: '绘本',
          max: 130,
        },
        {
          name: '医疗',
          max: 130,
        },
      ]
    },
    series: [{
      name: '预算 vs 开销',
      type: 'radar',// 系列类型: 雷达图
      data: [{
          value: [130, 100, 90, 130, 60],//type1 各个数据值
          name: '预算',// 模型名称
        },
        {
          value: [130, 50, 80, 130, 60],
          name: '开销'
        }
      ]
    }]
  };
  chart.setOption(option);
  return chart;
}
export {
  initChart,
  initChartL
}

2.在需要引入Echarts的文件里引入并加载。

//.wxml文件
<view class="container">
    <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas>
</view>

// pages/ChartResult/index.js
import { initChart} from "../../utils/initChart";
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart,
    }, //雷达图
  },
  },

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
}

.container {
  position: relative;
  width:100%;
  height: 800rpx;
} 
ec-canvas {
  width: 100%;
  height: 100%;
}

参考文章：www.cnblogs.com/wonderlust/…