dataZoom.silder滑动的时候 svg作出来的图会卡顿消失echarts custom配置项内容和展示
上下滚动的时候 第一列的图会消失 感觉是svg绘图产生性能问题 可能需要作一定防抖动操作才能解决？
配置项如下
let road = ['市广路', '市良路', '光明北路',
'光明南路', '大北路', '禺山大道中路', '西丽路', '福德路', '北京路', '北京路'
];
let data = [
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [1, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [1, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [1, 2, 3, 1]
}, {
itemStyle: {
color: "red"
},
name: "光明南路",
value: [1, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [1, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [1, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [1, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [1, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [1, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [2, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [2, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [2, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [2, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [2, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [2, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [2, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [2, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [2, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [3, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [3, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [3, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [3, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [3, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [3, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [3, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [3, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [3, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [4, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [4, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [4, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [4, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [4, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [4, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [4, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [4, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [4, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [5, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [5, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [5, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [5, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [5, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [5, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [5, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [5, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [5, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [6, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [6, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [6, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [6, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [6, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [6, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [6, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [6, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [6, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [7, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [7, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [7, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [7, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [7, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [7, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [7, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [7, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [7, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [8, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [8, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [8, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [8, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [8, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [8, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [8, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [8, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [8, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [8, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [8, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [8, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [8, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [8, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [8, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [8, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [8, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [8, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [9, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [9, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [9, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [9, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [9, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [9, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [9, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [9, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [9, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [10, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [10, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [10, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [10, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [10, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [10, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [10, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [10, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [10, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [11, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [11, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [11, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [11, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [11, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [11, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [11, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [11, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [11, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [12, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [12, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [12, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [12, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [12, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [12, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [12, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [12, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [12, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [13, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [13, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [13, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [13, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [13, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [13, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [13, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [13, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [13, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [14, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [14, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [14, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [14, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [14, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [14, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [14, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [14, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [14, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [15, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [15, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [15, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [15, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [15, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [15, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [15, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [15, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [15, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [16, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [16, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [16, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [16, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [16, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [16, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [16, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [16, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [16, 8, 9, 1]
},
{
itemStyle: {
color: "green"
},
name: "北京路",
value: [17, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [17, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [17, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [17, 3, 4, 1]
}, {
itemStyle: {
color: "green"
},
name: "大北路",
value: [17, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [17, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [17, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [17, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [17, 8, 9, 1]
}
]
var startTime = 0
var categories = ['8:00', '8:05', '8:10', '8:15', '8:20', '8:25', '8:15', '8:20', '8:25', '8:30', '8:35',
'8:40', '8:45', '8:50', '8:55', '9:00', '9:05', '9:10'
]
var path='M813.63968 524.24704l-289.46432 376.5248c-2.89792 3.77856-7.424 6.00064-12.17536 6.00063999-4.78208001 0-9.27744-2.22208-12.17536-6.00063999l-289.4848-376.5248c-2.11968-2.7648-3.18464-6.06208001-3.18464-9.36959999 0-3.24608 1.024-6.5024 3.10272-9.24672001 4.13696-5.50912 11.47904-7.56736 17.89952-5.03808001L419.84 576.30719999l-0.02048001-443.71967999c0.02048-8.48896 6.88128-15.36 15.38048001-15.36l153.57952 0c8.49919999 0 15.36 6.87104 15.38048 15.36L604.13952 576.3072l191.68256-75.7248c6.42048-2.52928 13.76256-0.47104 17.92 5.04832C817.89952 511.15008 817.87904 518.76864 813.63968 524.24704z'
var road2=[ {
itemStyle: {
color: "green"
},
name: "北京路",
value: [0, 0, 1, 1]
}, {
itemStyle: {
color: "green"
},
name: "市良路",
value: [0, 1, 2, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明北路",
value: [0, 2, 3, 1]
}, {
itemStyle: {
color: "green"
},
name: "光明南路",
value: [0, 3, 4, 1]
}, {
itemStyle: {
color: "red"
},
name: "大北路",
value: [0, 4, 5, 1]
}, {
itemStyle: {
color: "green"
},
name: "禺山大道中路",
value: [0, 5, 6, 1]
}, {
itemStyle: {
color: "green"
},
name: "西丽路",
value: [0, 6, 7, 1]
}, {
itemStyle: {
color: "green"
},
name: "福德路",
value: [0, 7, 8, 1]
}, {
itemStyle: {
color: "green"
},
name: "市广路",
value: [0, 8, 9, 1]
}]
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([categoryIndex, api.value(1)]);
var end = api.coord([categoryIndex, api.value(2)]);
var width = api.size([0, 1])[0] * 0.6;
return {
type: 'rect',
shape: {
y: end[1],
x: start[0] - width / 2,
height: start[1] - end[1],
width: width
},
style: api.style()
};
}
function renderItem2(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([categoryIndex, api.value(1)]);
var end = api.coord([categoryIndex, api.value(2)]);
var width = api.size([0, 1])[0] * 0.6;
return {
type: 'path',
shape: {
pathData:path,
y: end[1],
x: start[0] - width / 2,
height: start[1] - end[1],
width: width
},
style: api.style()
};
}
option = {
// animation:false,
tooltip: {
formatter: function (params) {
console.log(params)
return params.marker + params.name + ': ' + params.value[3] + ' ms';
}
},
title: {
text: 'Profile',
left: 'center'
},
legend: {
data: ['bar', 'error']
},
grid: {
height: 400
},
dataZoom: [{
show: true,
type: 'slider',
// y: '50%',
start: 0,
end: 50,
zoomLock:true,
// filterMode:'weakFilter'
}
, {
show: true,
type: 'slider',
yAxisIndex: [0],
left: '93%',
start: 0,
end: 50 ,
zoomLock:true,
throttle:0,
// filterMode:'none'
}
],
yAxis: {
min: startTime,
// show:false,
// scale: true,
// axisLabel: {
// formatter: function (val) {
// return Math.max(0, val - startTime) + ' ms';
// }
// },
offset: -20,
data: road,
show: true,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
xAxis: {
data: categories,
offset: 30,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
type: 'custom',
renderItem: renderItem,
animationDurationUpdate:1000,
itemStyle: {
normal: {
opacity: 0.8,
borderRadius: 50,
borderWidth: 1,
borderColor: '#fff',
}
},
encode: {
x: 0,
y: [1, 2]
},
data: data,
},
{
type: 'custom',
renderItem: renderItem2,
encode: {
x: 0,
y: [1, 2]
},
data: road2,
}]
};
截图如下
