防止Echarts重复执行出现闪烁

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

在实现Echarts图形表轮播中,发现需要实时更新Echarts图形表,会出现多个点闪烁(会跳来跳去的)


一、使用步骤

1.引入库

        echarts-auto-tooltip.js文件

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2.ajax请求代码

 var myChart = echarts.init(document.getElementById(Id));
    $.ajax({
        url: URL,
        type: 'post',
        data: '',
        dataType: 'json',
        async: false,
        contentType: 'application/json;charset=UTF-8',
        success: function (data) {
            console.log(data.Data);
            var option = {
                grid: {
                    left: '0',
                    top: '30',
                    right: '0',
                    bottom: '10',
                    containLabel: true
                },
                legend: {
                    top: 0,
                    textStyle: {
                        color: "#fff",
                    },
                    itemWidth: 12, // 设置宽度
                    itemHeight: 10, // 设置高度
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器,坐标轴触发有效
                        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: data.Data['entity'],
                    axisTick: { //---坐标轴 刻度
                        show: true, //---是否显示
                    },
                    axisLine: { //---坐标轴 轴线
                        show: true, //---是否显示
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',
                            width: 1,
                            type: 'dotted',
                        },
                    },
                    axisLabel: { //X轴文字
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: { //分割线
                        show: true,
                        lineStyle: {
                 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值