柱状图实现圆球悬浮最顶端

最新推荐文章于 2023-12-21 07:54:10 发布

冯小小猿

最新推荐文章于 2023-12-21 07:54:10 发布

阅读量647

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_38735381/article/details/128288437

版权

本文介绍了如何使用Echarts在柱状图上实现圆球悬浮在最顶端的两种方法：散点图实现和柱状图实现。通过获取y轴最大刻度并增加间隔，确保圆球不与柱状图重叠。散点图实现中，圆球与柱状图可独立设置；而柱状图实现则使圆球与柱子直接关联。关键在于调整圆球高度以达到悬浮效果。

摘要由CSDN通过智能技术生成

效果图如下：

实现由两种方法，分别为：散点图实现，柱状图实现

散点图实现：

第一步：获取yAxis最大刻度，并在最大刻度上再加一个刻度间隔，目的是让圆球百分比不会和柱状图重叠

代码如下：

 // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    let data = [120, 200, 150, 80, 70, 110, 130]

    // 1.获取yAxis最大刻度，并在最大刻度上再加一个刻度间隔，目的是让圆球百分比不会和柱状图重叠
    let maxData = Math.max(...data);//1.1获取当前数据的最大值
    console.log(maxData)
    // 1.2制造一个新的不显示的echarts获取y轴的刻度 
    let option = {
        xAxis: {},
        yAxis: {},
        series: [{ type: 'bar', data: [data], }]
    };
    myChart.clear();
    myChart.setOption(option);
    console.log('刻度为', myChart.getModel().getComponent('yAxis'))
    let item = myChart.getModel().getComponent('yAxis').axis.scale; //获取当前的y轴的范围(_extent)和每个刻度之间的间隔(_interval)
    let yAxisMax = item._extent[1] + item._interval; //获取y轴最大刻度并且再加上一个间隔
    let data2 = data.slice()
    let yAxisMaxData = data2.fill(yAxisMax); //设置个全为y轴刻度高度的值，目的是让悬浮圆球在最顶层

第二步：设置真实要显示的option了

// 2.设置真实要显示的option了
    option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量1', '销量2']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },

        yAxis: {},
        series: [
            {
                name: '销量1',
                type: 'scatter',
                data: yAxisMaxData, //[250, 250, 250, 250, 250, 250, 250]
                symbolSize: 40,
                // symbolOffset: [25, 0],
                label: {
                    show: true,
                    position: 'inside',
                    color: '#303133',
                    fontSize: 10,
                    fontWeight: "bold",
                    formatter: function (params) {
                        let index = params.dataIndex;
                        return (data[index]);
                    },
                },

            },
            {
                name: '销量2

最低0.47元/天解锁文章