echarts实现top可视化效果

来源:互联网 发布:淘宝助理有mac版 编辑:程序博客网 时间:2024/06/06 02:51

利用echarts实现top效果可视化,将echart自身的scatter和react合并起来实现

option = {            series: [{                name: 'scatter',                type: 'scatter',                smooth: true,                showAllSymbol: true,                symbol: 'circle',                symbolSize:12,                symbolOffset:[0,0],                data: lineData,                hoverAnimation:false,                label:{                    normal:{                        show:true,                        position:'top',                        offset :[-30,0],                        formatter:function(p){                            let b = p.data.name,c = p.data.value;                            return '{p1|' + b + '}\n{p2|事件数:' + c + '}'                        },                        align: 'left',                        rotate:10,                        rich:{                            p1:{                                color:'#525455',                                align: 'left',                                fontSize:16,                                height:20                            },                            p2:{                                color:'#0e4dec',                                align: 'left',                                fontSize:16,                                height:20                            }                        }                    }                },                itemStyle:{                    normal:{                        color: '#ffffff',                        borderColor:"#f93d3c",                        borderWidth:3                    }                },                zlevel:99            }, {                name: 'dotted',                type: 'pictorialBar',                symbol: 'rect',                itemStyle: {                    normal: {                        color: '#f93d3c'                    }                },                symbolRepeat: true,                symbolSize: [2, 6],                symbolMargin: 2,                zlevel:9,                data: barData,                clipOverflow:false,               }]        };

这里写图片描述

原创粉丝点击