雷达图自定义各点颜色

最新推荐文章于 2024-10-16 15:58:46 发布
原创最新推荐文章于 2024-10-16 15:58:46 发布 · 1.3k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#echarts
echarts 专栏收录该内容
2 篇文章
订阅专栏
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
        }
    },