|
说明：echarts图表有很多类，这一篇主要是雷达图的我用到的部分配置，主要解决的问题就是背景色的问题。
先上图：
下面是我的配置方面：
import Echarts from 'echarts';
let options = {
title: {
text: '雷达图',
textStyle: {
color: 'rgba(221,221,221,1)', //标题颜色
fontSize: 14,
lineHeight: 20,
},
// 标题的位置，此时放在图的底边
left: 'center',
top: 'bottom',
},
tooltip: {
trigger: 'item' //鼠标移动到节点上会显示数据，这里没有使用formatter自定义显示内容
},
grid: {
top: 30,//网格的位置，这里下调了30px
left: 0,
right: 0,
bottom: 0,
containLabel: true //containLabel：含坐标轴的刻度标签
//true的时候是表示上面的top等条件决定了，坐标轴标签在内的所有内容所形成的矩形的位置，这样防止标签溢出
},
radar: { //只适用于雷达图的组件
splitNumber: 4, // 雷达图圈数设置
indicator: [ //雷达图的指示器，用于指定图中的 变量，可以单独设置颜色属性
{
text: '数学抽象',
max: 100
},
{
text: '逻辑思维',
max: 100
},
{
text: '数学建模',
max: 100
},
{
text: '直观想象',
max: 100
},
{
text: '数学运算',
max: 100
},
{
text: '数据分析',
max: 100
}
],
name: { //统一设置颜色字体
textStyle: {
color: '#f6c45f',
fontSize: 16
}
},
radius: 130, //雷达图的半径
splitArea: { //分割区域设置
areaStyle: { //分割区域的样式设置
color: (function () {
let colors = [];
for(let i = 0;i < 4;i++) {
colors.push(new Echarts.graphic.RadialGradient(
0.5, 0.5, 1.0,
[{
offset: 0.5,
color: 'rgba(248, 243, 234,1)'
},{
offset: 0.4,
color: '#fff'
}]
),);
}
return colors;
})()
//在设置颜色时候，因为背景图是一个渐变的背景图，所以引用的是
//Echarts.graphic.RadialGradient这个方法，这个渐变是中心渐变，还有一个线性渐变，需要的自己去查，
//一样的用法，然后每一层都是一样的渐变，所以用了一个自执行的函数让他遍历出四个来
},
splitLine: { //分割区域分隔线的样式设置
show: true,
lineStyle: {
color: '#ddd'
}
}
}
},
}
| 
转播
