echarts实现top可视化效果

最新推荐文章于 2024-06-24 14:32:32 发布

zw_slime

最新推荐文章于 2024-06-24 14:32:32 发布

阅读量2.3k

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/zw52yany/article/details/78055984

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用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,
               }]
        };