echarts中存在的_echarts_instance_属性--echarts刷新作用

$("#theme_btn").click(function () {
        var theme = $("#theme").val();
 
        //echarts的渲染逻辑是这样的：
        //如果未实例化则进行实例化过程，在此期间会在div容器生成一个_echarts_instance_属性，该属性就是当前echarts的ID,然后进行后边的渲染操作，当我们刷新已经实例化的echarts图表时，echarts会先匹配该div容器上的_echarts_instance_属性值是否与实例对象一样，如果一样则会在原生的结构上进行渲染，但是因为我破坏原生的结构，所以无法重新渲染出表格内容
        // 所以我们可以执行如下代码
        document.getElementById('main1').setAttribute('_echarts_instance_', '');
        document.getElementById('main2').setAttribute('_echarts_instance_', '');
        document.getElementById('main3').setAttribute('_echarts_instance_', '');
        document.getElementById('main4').setAttribute('_echarts_instance_', '');
        document.getElementById('main5').setAttribute('_echarts_instance_', '');
 
        var mycharts1 = echarts.init(document.getElementById('main1'), theme);
        var mycharts2 = echarts.init(document.getElementById('main2'), theme);
        var mycharts3 = echarts.init(document.getElementById('main3'), theme);
        var mycharts4 = echarts.init(document.getElementById('main4'), theme);
        var mycharts5 = echarts.init(document.getElementById('main5'), theme);
 
        mycharts1.setOption(option1, true);
        mycharts2.setOption(option2, true);
        mycharts3.setOption(option3, true);
        mycharts4.setOption(option4, true);
        mycharts5.setOption(option5, true);
    });

我在实例中的使用：

            <div class="panel-title shot">各楼栋宿舍分布 
                <div class="btn">
                    <button class="actived">海甸校区</button>
                    <button>儋州校区</button>
                    <button>城西校区</button>
                </div>
            </div>
            <div class="panel-body" id="building">

            </div>

下面的js主要分为两种效果。点击切换改变echarts图,echarts图五条数据滚动。

点击切换改变echarts图

 	var $btns = $('#' + id).prev().children('.btn'),
            type = $btns.find('.actived').text();


		$btns.find('button').on('click', function () {
                if ($(this).hasClass('actived')) return false;
                $(this).addClass('actived').siblings().removeClass('actived');
                clearInterval(timeTicket1);
                building(id);//重新调用函数，实行图标的转变
            })

echarts图五条数据滚动

			//刚开始渲染上去，滚动渲染上去
			var categorys = res.axisData,
                barDatas = res.data;
            var category = categorys.slice(0, 5);
            var barData = barDatas.slice(0, 5);
            option.yAxis.data = category.reverse();
            option.series[1].data = barData.reverse();
            var bgData = [];
            $.map(barData, function () {
                bgData.push(res.max * 1.1);
            });
            option.series[0].data = bgData;
            option.series[0].label.formatter = function (p) {
                var idx = p.dataIndex;
                return barData[idx] + '个';
            };
            myChart.setOption(option);
            timeTicket1 = setInterval(function () {
                var key1 = categorys.shift(),
                    key2 = barDatas.shift();
                categorys.push(key1);
                barDatas.push(key2);
                var category = categorys.slice(0, 5);
                var barData = barDatas.slice(0, 5);
                option.yAxis.data = category.reverse();
                option.series[1].data = barData.reverse();
                option.series[0].data = bgData;
                option.series[0].label.formatter = function (p) {
                    var idx = p.dataIndex;
                    return barData[idx] + '个';
                };
                myChart.setOption(option);
            }, 3000);

整体代码

    building('building');

    function building(id) {
       var $btns = $('#' + id).prev().children('.btn'),
            type = $btns.find('.actived').text();
        var bar_colors = ['#4effd7', '#e84b2e', '#f9b90b', '#1192e2', '#19dc59'];
        var max = 6
        $('#' + id).attr('_echarts_instance_','');
        var myChart = echarts.init(document.getElementById(id));

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: '{b}：{c1}' + '个'
            },
            grid: {
                top: h <= 768 ? 40 : 60,
                bottom: 0,
                left: 30,
                right: 60,
                containLabel: true
            },
            xAxis: {
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: "category",
                data: [],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    fontSize: h <= 768 ? 12 : 14,
                    color: '#fff',
                    fontFamily: 'Microsoft YaHei'
                }
            },
            series: [{ // 蓝柱下面方块
                    name: '',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    cursor: 'default',
                    itemStyle: {
                        color: function (c) {
                            return bar_colors[c.dataIndex % bar_colors.length];
                        },
                        opacity: .2
                    },
                    z: -11,
                    symbolMargin: 1,
                    symbolRepeat: true,
                    symbolSize: [4, 12],
                    data: [],
                    label: {
                        show: true,
                        color: '#fff',
                        position: 'right',
                        formatter: '{c}' + '个',
                        offset: [0, -2],
                        fontSize: h <= 768 ? 12 : 14,
                        fontWeight: 'bold'
                    }
                },
                { // 蓝柱
                    name: '', // blue bar
                    type: 'pictorialBar',
                    symbol: 'rect',
                    cursor: 'default',
                    itemStyle: {
                        color: function (c) {
                            return bar_colors[c.dataIndex % bar_colors.length];
                        }
                    },
                    symbolMargin: 1,
                    symbolRepeat: true,
                    symbolSize: [4, 12],
                    label: {
                        show: false,
                        color: '#fff',
                        position: 'right',
                        formatter: '{c}' + '个',
                        offset: [0, -2],
                        fontSize: h <= 768 ? 12 : 14,
                    },
                    data: [],
                }
            ],
        }

        options($('#'+id), {
            options: option,
            url: urls.dormitoryDis,
            params: {
                cid: cid,
                xqmc: type
            }
        },function(myChart, res){
            var categorys = res.axisData,
                barDatas = res.data;
            var category = categorys.slice(0, 5);
            var barData = barDatas.slice(0, 5);
            option.yAxis.data = category.reverse();
            option.series[1].data = barData.reverse();
            var bgData = [];
            $.map(barData, function () {
                bgData.push(res.max * 1.1);
            });
            option.series[0].data = bgData;
            option.series[0].label.formatter = function (p) {
                var idx = p.dataIndex;
                return barData[idx] + '个';
            };
            myChart.setOption(option);
            timeTicket1 = setInterval(function () {
                var key1 = categorys.shift(),
                    key2 = barDatas.shift();
                categorys.push(key1);
                barDatas.push(key2);
                var category = categorys.slice(0, 5);
                var barData = barDatas.slice(0, 5);
                option.yAxis.data = category.reverse();
                option.series[1].data = barData.reverse();
                option.series[0].data = bgData;
                option.series[0].label.formatter = function (p) {
                    var idx = p.dataIndex;
                    return barData[idx] + '个';
                };
                myChart.setOption(option);
            }, 3000);
            $btns.find('button').on('click', function () {
                if ($(this).hasClass('actived')) return false;
                $(this).addClass('actived').siblings().removeClass('actived');
                clearInterval(timeTicket1);
                building(id);
            })
        })

    }