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);
})
})
}
