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

效果图如下:

实现由两种方法,分别为:散点图实现,柱状图实现

散点图实现:

第一步:获取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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值