自己把自己坑了
公司需求的时候，做了一种线形图，根据数值的大小，变换颜色。示例图如下：
线形图的写法：
color:function(params) {
let colorList = ['#2CBAFF','#FE7979'];
if (params.data < 70) {
return colorList[0];
} else if (params.data >= 70) {
return colorList[1];
}
}
产品经理问我，可以不可以做出这样的。设计图如下：
因为才使用这个插件一天，也不是很熟悉，感觉原理应该差不多。就答应了下来。
(自己挖坑 = =! )
等真正做的时候，发现事情并没有这么简单。。
-
首先，线图和雷达图的数据写法不一样
线图的数据如下：
series : [
{
type:'line', --类型 线
label: {
normal: { --文字样式
margin:2, --距离
show: true, --是否展示文字
position: 'top', --文字在点的哪个位置
fontSize:'14' --文字大小
}
},
-----------------------------数据在这---------------------------------
data:[86, 78, 65, 52, 51, 49],
-----------------------------数据在这---------------------------------
smooth: true, --让曲线变平滑的
symbolSize: 13, --圆点大小
color:function(params) { -- 颜色 颜色写在外面，就是圆点和文字同种颜色
let colorList = ['#2CBAFF','#FE7979'];
alert(params.data) 画重点！！！ 循环输出 数据 86 78 65 52 51 49
if (params.data < 70) { /
return colorList[0];
} else if (params.data >= 70) {
return colorList[1];
}
},
lineStyle: { -- 线的样式
normal: {
color: '#2CBAFF',
width: 6,
shadowColor: 'rgba(0,70,139,0.9)',
shadowBlur: 50,
shadowOffsetY: 15
}
},
itemStyle:{ -- 圆点样式
borderWidth:3
},
}
]
线图的数据: data:[xxx,xxx,xxx,xxx,xxx,xxx,xxx]
雷达图数据如下：
series: [
{
type: 'radar',
radarIndex: 1,
data: [
{
-----------------------------数据在这---------------------------------
value: [100, 60, 50, 80, 50, 90, 80, 50, 80, 40], -- 数据
-----------------------------数据在这---------------------------------
symbolSize: 8, --拐点大小
lineStyle: { --线的样式
width: 4,
color: '#29B8FF'
},
areaStyle: { --数据圈内样式
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#27B7FF',
offset: 0
},
{
color: '#5AD1FF',
offset: .4
}
])
}
}
}
],
itemStyle: { --圆点样式
normal: {
borderWidth: 0,
//color: '#2CBAFF',
color:function(params) { -- 颜色 颜色写在外面，就是圆点和文字同种颜色
let colorList = ['#2CBAFF','#FE7979'];
alert(params.data) 不同点 获取不到数据
if (params.data < 70) { /
return colorList[0];
}else if (params.data >= 70) {
return colorList[1];
}
}
}
},
}
雷达图的数据: data:[ value{xxx,xxx,xxx,xxx,xxx,xxx,xxx} ] 内
后来的做法：把itemStyle提了出去，与data同级
series: [
{
type: 'radar',
radarIndex: 1,
data: [
{ value: [75, 95, 90, 90, 85, 83, 80, 60, 90, 100],
symbolSize: 7,
// itemStyle: {
// normal: {
// borderWidth: 2,
// // color:'#2CBAFF'
// color:'red',
// // color: function (params) {
// // console.log(params);
// // let colorList = ['#2CBAFF', '#FE7979'];
// // alert(params.data[0].value)
// // if (params.data[0] < 70) {
// // return colorList[0];
// // } else if (params.data[0] >= 70) {
// // return colorList[1];
// // }
// // },
// }
// }, 删除
lineStyle: {
width: 4,
color: '#29B8FF'
},
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#27B7FF',
offset: 0
},
{
color: '#5AD1FF',
offset: .4
}
])
}
}
}
],
itemStyle: { -- 放到这里
normal: {
borderWidth: 2,
color: function (params) {
let colorList = ['#2CBAFF', '#FE7979'];
for(let i = 0;i<params.value.length;i++){
alert(params.value[i]);
if (params.value[i] < 70) {
console.log(colorList[0])
} else if (params.value[i] >= 70) {
console.log(colorList[1])
}
}
}
}
}
}
]
这种写法会依次根据在控制台输出符合的颜色
返回结果
-
第二，线图可以接受多个颜色，而雷达图radar只能接受一个颜色
我以为到这里已经结束了。
BUT。。。
当我把console.log换成return的时候。遍历数组，总是根据数组第一个值返回对应颜色，下面的不执行了，并把所有的拐点设置为第一个值符合的颜色。
简单来说，就是雷达图的颜色只接受一个参数。
换种思维
既然一组数据只能用一种颜色，我在绘制这个数组的时候，先做个遍历：
- 大于等于某值，生成一个数组，设置颜色1
- 小于某值，生成一个数组，设置颜色2
绘制
一个图表 设置三层覆盖
- 把所有数据绘制下来。不要圆点。只要线
- 把大于某数值的圆点绘制下来，设置蓝色
- 把小于某数值的圆点绘制下来，设置红色
#### 绘制了三个图表，有时间再详细解析。可以根据需要删除多余的。
<script>
var myChart1 = echarts.init(document.getElementById('chartsContCanvas1'));
var myChart2 = echarts.init(document.getElementById('chartsContCanvas2'));
var myChart3 = echarts.init(document.getElementById('chartsContCanvas3'));
//数据在这里,分别表示三个图表
var itemArrIntelligence = [86, 84, 91, 77, 82, 70]; //智力
var itemArrBone = [59, 89, 100, 82]; //骨骼发育
var itemArrImmunity = [91, 95, 100, 82, 70]; //免疫力
var intelligenceNormal = itemArrIntelligence.map((item) => { if (item >= 70) { return } else { return item } })
var intelligenceLow = itemArrIntelligence.map((item) => { if (item < 70) { return } else { return item } })
var boneNormal = itemArrBone.map((item) => { if (item >= 70) { return } else { return item } })
var boneLow = itemArrBone.map((item) => { if (item < 70) { return } else { return item } })
var immunityNormal = itemArrImmunity.map((item) => { if (item >= 70) { return } else { return item } })
var immunityLow = itemArrImmunity.map((item) => { if (item < 70) { return } else { return item } })
//渲染图标样式
option1 = {
radar: [
{
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.9)'
}
}
},
{
indicator: [ //这里设置ID是每一项名称，及百分制
{ text: 'DHA', max: 100 }, { text: 'γ-氨基丁酸', max: 100 }, { text: '铁', max: 100 }, { text: '维生素B12', max: 100 }, { text: '锌', max: 100 }, { text: '叶酸', max: 100 }
],
nameGap: 6,
center: ['50%', '50%'],
radius: 105,
name: {
textStyle: {
color: '#AAB8C6',
fontSize: 11,
fontWeight: 300,
}
},
splitArea: {
areaStyle: {
color: ['none',
'none', 'none',
'none', 'none'],
}
},
axisLine: {
lineStyle: {
color: '#cde6f5'
},
},
splitLine: {
lineStyle: {
color: '#cde6f5'
},
}
}
],
series: [
{
type: 'radar',
radarIndex: 1,
legend: {
orient: 'vertical',
selectedMode: false,
},
data: [
{
value: itemArrIntelligence,
symbolSize: 7,
lineStyle: {
width: 2,
color: '#29B8FF'
},
areaStyle: {
normal: {
opacity: 0.75,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#27B7FF',
offset: 0
},
{
color: '#5AD1FF',
offset: .4
}
])
}
}
}
],
itemStyle: {
normal: {
borderWidth: 0,
color: '#2CBAFF',
// show:false
}
},
silent: true,
z: 1
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: intelligenceNormal,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#FE7979'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
silent: true,
z: intelligenceLow[0] ? 2 : 3,
},
{
type: 'radar',
radarIndex: 1,
z: intelligenceLow[0] ? 3 : 2,
data: [
{
value: intelligenceLow,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#2CBAFF'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
silent: true
},
]
}
option2 = {
radar: [
{
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.9)'
}
}
},
{
indicator: [ //这里设置ID是每一项名称，及百分制
{ text: '钙', max: 100 }, { text: '磷', max: 100 }, { text: '维生素D', max: 100 }, { text: '锌', max: 100 }
],
nameGap: 6,
center: ['50%', '50%'],
radius: 105,
name: {
textStyle: {
color: '#AAB8C6',
fontSize: 11,
fontWeight: 300,
}
},
splitArea: {
areaStyle: {
color: ['none',
'none', 'none',
'none', 'none'],
}
},
axisLine: {
lineStyle: {
color: '#cde6f5'
}
},
splitLine: {
lineStyle: {
color: '#cde6f5'
}
}
}
],
series: [
{
type: 'radar',
radarIndex: 1,
nodeClick: false,
legend: {
orient: 'vertical',
selectedMode: false,
},
data: [
{
value: itemArrBone,
symbolSize: 7,
lineStyle: {
width: 2,
color: '#29B8FF'
},
areaStyle: {
normal: {
opacity: 0.75,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#27B7FF',
offset: 0
},
{
color: '#5AD1FF',
offset: .4
}
])
}
}
}
],
itemStyle: {
normal: {
borderWidth: 0,
// color: '#2CBAFF',
show: false
}
},
silent: true,
z: 1
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: boneNormal,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#FE7979'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
silent: true,
z: boneLow[0] ? 2 : 3,
},
{
type: 'radar',
radarIndex: 1,
z: boneLow[0] ? 3 : 2,
data: [
{
value: boneLow,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#2CBAFF'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
silent: true
},
]
}
option3 = {
radar: [
{
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.9)'
}
}
},
{
indicator: [ //这里设置ID是每一项名称，及百分制
{ text: '铁', max: 100 }, { text: '维生素A', max: 100 }, { text: '维生素D', max: 100 }, { text: '锌', max: 100 }, { text: '叶酸', max: 100 }
],
nameGap: 6,
center: ['50%', '50%'],
radius: 105,
name: {
textStyle: {
color: '#AAB8C6',
fontSize: 11,
fontWeight: 300
}
},
splitArea: {
areaStyle: {
color: ['none',
'none', 'none',
'none', 'none'],
}
},
axisLine: {
lineStyle: {
color: '#cde6f5'
}
},
splitLine: {
lineStyle: {
color: '#cde6f5'
}
}
}
],
series: [
{
type: 'radar',
radarIndex: 1,
nodeClick: false,
legend: {
orient: 'vertical',
selectedMode: false,
},
data: [
{
value: itemArrImmunity,
symbolSize: 7,
lineStyle: {
width: 2,
color: '#29B8FF'
},
areaStyle: {
normal: {
opacity: 0.75,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#27B7FF',
offset: 0
},
{
color: '#5AD1FF',
offset: .4
}
])
}
}
}
],
itemStyle: {
normal: {
borderWidth: 0,
show: false
}
},
silent: true,
z: 1
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: immunityNormal,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#FE7979'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
silent: true,
z: immunityLow[0] ? 2 : 3,
},
{
type: 'radar',
radarIndex: 1,
z: immunityLow[0] ? 3 : 2,
data: [
{
value: immunityLow,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#2CBAFF'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
silent: true
},
]
}
//渲染图表
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
</script>
