小程序+echarts制作雷达图

本文介绍: 微信小程序引入 echars 参考文档：https://echarts.apache.org/h and book/zh/how–t o/cross–pla t form/w e chat–app wxml:<view class=’box‘&g t;<ec–canvas id=”chart” canvas–id=”chart” ec=”{{ ec }}” force–use–old–canvas=”true“&g t;</ec–ca n va s&g t;</view>j…

<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
        }
}