前言

最近在开发微信小程序的过程中遇到了使用雷达图的需求，怎么做呢？纯粹的用样式来写太麻烦了，想到了网页上可以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为你组件的路径。

修改引入雷达图页面的js文件内容

我们下载下来的项目，本身就带有各个类型的示例代码，如下：

我们这里要用的是雷达图，所以我们直接就可以复制radar内js文件的内容到我们的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
}
]
},

效果如图：

好啦，今天就先分享到这里吧。