methods:{
transform:function(e){
switch (e){
case '风速':return 'windspeed';
case '风向':return 'winddirection';
case '温度':return 'temperature';
case '湿度':return 'humidity';
case '气压':return 'pressure';
}
},
initChart: function () {
this.myChart = echarts.init(document.getElementById('roseChart'))
var itemArr = [vthis.cdata.windspeed, vthis.cdata.winddirection, vthis.cdata.temperature, vthis.cdata.humidity, vthis.cdata.pressure]; //数据数组
var n1 = [vthis.cdata.windspeed, 100000, 100000, 100000, 100000, 100000]//风速
var n2 = [100000, vthis.cdata.winddirection, 100000, 100000, 100000, 100000]//风向
var n3 = [100000, 100000, vthis.cdata.temperature, 100000, 100000, 100000]//温度
var n4 = [100000, 100000, 100000, vthis.cdata.humidity, 100000, 100000]//湿度
var n5 = [100000, 100000, 100000, 100000, vthis.cdata.pressure, 100000]//气压
// var n7 = [100000, 100000, 100000, 100000, 100000, 100000]
var labelArr = ['风速', '风向', '温度', '湿度', '气压'] //显示图例用
this.option = {
legend: {
orient: 'horizontal',
align:'auto',
// left: '400px',
bottom: '0',
icon: 'square',
data: labelArr,
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
radar: [
{
splitLine: {
lineStyle: {
color: '#000'
}
}
},
{
indicator: [
{ name: '风速', max: 50,color:'#fff'},
{ name: '风向', max: 360,color:'#fff' },
{ name: '温度', max: 50,color:'#fff' },
{ name: '湿度', max: 100,color:'#fff' },
{ name: '气压', max: 1100,color:'#fff' }
],
splitNumber: 4,
nameGap: 6,
center: ['50%', '50%'],
top:0,
radius: '80%',
name: {
textStyle: {
color: '#000',
fontSize: 14,
fontWeight: 400,
}
},
splitArea: {
areaStyle: {
color: ['#071a48'],
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10
}
},
axisLine: {
show: false, //雷达图中心发出的射线:坐标轴轴线相关设置
},
splitLine: {
lineStyle: {
color: '#273763' //网格的颜色
},
}
}
],
series: [
{
type: 'radar', //绘制总的图形不设置拐点
radarIndex: 1,
tooltip: {
trigger: 'item'
},
data: [
{
value: itemArr,
symbolSize: 7,
lineStyle: {
width: 2,
color: '#29B8FF'
},
areaStyle: {
color: ['#0f297f'],
shadowColor: 'rgba(15, 41, 127, 0.6)',
shadowBlur: 10
}
}
],
itemStyle: {
normal: {
borderWidth: 0,
color: '#000',
// show:false
}
},
silent: true,
z: 1 //图层是一层一层叠加,所以这个也是一级一级递增
},
{
type: 'radar', //绘制第一个点
radarIndex: 1,
name: labelArr[0],
silent: true,
tooltip: {
trigger: 'item'
},
z: 2, //图层是一层一层叠加,所以这个也是一级一级递增
data: [
{
value: n1,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#19c1c3'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
}
},
{
type: 'radar',
radarIndex: 1, //绘制第二个点
name: labelArr[1],
silent: true,
tooltip: {
trigger: 'item'
},
z: 3, //图层是一层一层叠加,所以这个也是一级一级递增
data: [
{
value: n2,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#3c4b70'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
},
{
type: 'radar', //绘制第三个点
radarIndex: 1,
name: labelArr[2],
silent: true,
tooltip: {
trigger: 'item'
},
z: 4, //图层是一层一层叠加,所以这个也是一级一级递增
data: [
{
value: n3,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#2c94ff'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
},
{
type: 'radar', //绘制第四个点
radarIndex: 1,
name: labelArr[3],
silent: true,
tooltip: {
trigger: 'item'
},
z: 5, //图层是一层一层叠加,所以这个也是一级一级递增
data: [
{
value: n4,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#d85792'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
},
{
type: 'radar', //绘制第五个点
radarIndex: 1,
name: labelArr[4],
silent: true,
tooltip: {
trigger: 'item'
},
z: 6, //图层是一层一层叠加,所以这个也是一级一级递增
data: [
{
value: n5,
symbolSize: 7,
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#5d4fff'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
},
},
],
}
this.myChart.on('legendselectchanged',function (e){
for(let key in e.selected){
let param = vthis.transform(key)
if(e.selected[key]===false){
vthis.cdata[param]=0
}else{
vthis.cdata[param]=vthis.cdata1[param]
}
}
})
this.myChart.setOption(this.option);
},
},
watch:{
cdata:{//这里监听重绘图与mychart中监听‘legendselectchanged'合用让点击legend的时候图表第一层与对应legend点击选择层的数据显示一致
handler(o,n){
this.initChart()
},
deep:true
}
},
雷达图自定义各点颜色
最新推荐文章于 2024-02-20 10:46:58 发布