自己把自己坑了
公司需求的時候，做了一種線形圖，根據數值的大小，變換顏色。示例圖如下：
線形圖的寫法：
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>
