最近在开发微信小程序的过程中遇到了使用雷达图的需求，怎么做呢？纯粹的用样式来写太麻烦了，想到了网页上可以echarts来做，尝试在网上搜了搜，发现原来微信小程序也可以支持echarts。这里就给大家写个示例，分享一下吧。

要在微信小程序中使用echarts，首先得下载相关组件，下载地址：https://github.com/ecomfe/echarts-for-weixin 这个链接中的项目是echarts微信版的示例模板，下载下来就可以了

模板下载下来了，具体该怎么引入组件呢？有两种方式： 1.直接在下载下来的项目中修改代码，将这个项目替换成你的项目； 2.或者仅拷贝 ec-canvas 目录到你自己的项目下，然后做相应的调整。 在这里，由于我们前期已经开发了很多功能，重新修改代码有些麻烦，所以直接使用第二种方法，将ec-canvas 目录拷贝到自己的项目中，目录结构如下：

1.确认ec-canvas目录下ec-canvas.json的内容如下：

{ “component”: true, “usingComponents”: {} }

2.将自己要引入雷达图的页面中json文件的内容修改为：

{ “usingComponents”: { “ec-canvas”: “/ec-canvas/ec-canvas” } }

#注意：ec-canvas为你后面引入组件要用的标签名，/ec-canvas/ec-canvas为你组件的路径。

我们下载下来的项目，本身就带有各个类型的示例代码，如下： 我们这里要用的是雷达图，所以我们直接就可以复制radar内js文件的内容到我们的js文件中，然后手动修改。

由于我们要做的雷达图是五边形的雷达图，所以我们修改indicator中的键值对个数为5个，如图： max属性就是你每个轴上的最大值。

接下来我们绘制数据图形。 series中的name不多说了，就是你这个图表的名称，我们并不会显示它，所以就不用深究了。 type属性用来表示你的图形的类型，我们画的雷达图，所以直接写radar即可。 data的值是一个列表，复制过来的代码默认有两条数据，因为我们画的雷达图只有一组数据，所以可以删掉一条数据，来看数据中value，因为我们画的是五边形的雷达图，只有五个轴，所以，value写五个值即可。value中每个值不要超过上面max设定的最大值。 官方示例效果如下： 修改后radar代码如下

radar: { // shape: ‘circle’, indicator: [{ name: ‘1’, max: 3 }, { name: ‘2’, max: 3 }, { name: ‘3’, max: 3 }, { name: ‘4’, max: 3 }, { name: ‘5’, max: 3 } ] }, series: [{ name: ‘demo’, type: ‘radar’, data: [{ value: [1, 2, 1, 3, 1], name: ‘预算’ } ] }] };

效果如下： 那么问题来了，我们设置的最大值是3，但是这个图上一共有5层，数据加1，显示的个数就加1的效果，怎么设置层数呢？看下面：

splitNumber: 3,

只需要在radar中加上这条属性，后面的数字即为你想设置的层数。修改后如下：

radar: { splitNumber: 3, // shape: ‘circle’, indicator: [{ name: ‘1’, max: 3 }, { name: ‘2’, max: 3 }, { name: ‘3’, max: 3 }, { name: ‘4’, max: 3 }, { name: ‘5’, max: 3 } ] },

1.设置雷达图背景色

splitArea: { areaStyle: { color: [’#81D842’, ‘#81D842’, ‘#81D842’, ‘#81D842’] } },

2.设置连线颜色

axisLine: { lineStyle: { color: ‘black’ } },

3.设置轴线颜色

splitLine: { lineStyle: { color: ‘black’ } },

这三条属性全部添加至radar中即可，颜色可以使用十六进制，也可以使用rgba的方式。修改后代码如下：

radar: { splitNumber: 3, // shape: ‘circle’, splitArea: { areaStyle: { color: [’#81D842’, ‘#81D842’, ‘#81D842’, ‘#81D842’] } }, axisLine: { lineStyle: { color: ‘black’ } }, splitLine: { lineStyle: { color: ‘black’ } }, indicator: [{ name: ‘1’, max: 3 }, { name: ‘2’, max: 3 }, { name: ‘3’, max: 3 }, { name: ‘4’, max: 3 }, { name: ‘5’, max: 3 } ] }, series: [{ name: ‘demo’, type: ‘radar’, data: [{ value: [1, 2, 1, 3, 1], name: ‘预算’ } ] }] };

效果如下：

—_—!!!，这颜色，自己都看不下去啦！！！颜色大家自己根据项目需求调整吧，这里只是做个示例…

还是少点东西，数据得设置个填充色吧，光线条有点单调。

在series中加入属性areaStyle，设置颜色。代码如下：

series: [{ name: ‘demo’, type: ‘radar’, areaStyle: { color: ‘yellow’, // 透明度 // opacity: 0.6 }, data: [{ value: [1, 2, 1, 3, 1], name: ‘预算’ } ] }]

可以添加透明度的哦。效果如下： ……，还是有点问题，这个边框为什么是蓝色呢？继续改！

在series中继续加入属性lineStyle，代码如下：

series: [{ name: ‘demo’, type: ‘radar’, areaStyle: { color: ‘yellow’, // 透明度 // opacity: 0.6 }, lineStyle: { color: ‘yellow’ }, data: [{ value: [1, 2, 1, 3, 1], name: ‘预算’ } ] }]

效果： 要是还想给它加个透明度的话可以把颜色改成rgba()的方式写哦，例：

lineStyle: { color: ‘rgba(255,255,0,0.5)’ },

在radar中加入name属性。代码如下：

name:{textStyle:{ fontSize:50, rich:{} }},

修改后代码如下：

radar: { splitNumber: 3, // shape: ‘circle’, name: { textStyle: { fontSize: 50, rich: {} } }, splitArea: { areaStyle: { color: [’#81D842’, ‘#81D842’, ‘#81D842’, ‘#81D842’] } }, axisLine: { lineStyle: { color: ‘black’ } }, splitLine: { lineStyle: { color: ‘black’ } }, indicator: [{ name: ‘1’, max: 3 }, { name: ‘2’, max: 3 }, { name: ‘3’, max: 3 }, { name: ‘4’, max: 3 }, { name: ‘5’, max: 3 } ] },

效果如图： 好啦，今天就先分享到这里吧。