我正在使用带有 x 轴上的符号的 echarts js 制作一个简单的条形图。我也在尝试为 xAxis 做数据滚动，但是当我滚动时，符号位置不会随着滚动而改变。我浏览了 echarts 的 API 文档，但一无所获。我正在尝试这个JsFiddle
var advertLineChart = document.getElementById('advertLineChart');
var myAdvertLineChart = echarts.init(advertLineChart);
createAdvertLineChart();
function createAdvertLineChart() {
var option = {
title: {
x: 'center',
text: 'ECharts例子个数统计',
subtext: 'Rainbow bar example',
link: 'http://echarts.baidu.com/doc/example.html'
},
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
orient: 'vertical',
y: 'center',
itemSize: 12,
feature: {
mark: {
show: true,
title: {
mark: 'Create line mark',
markUndo: 'Undo line mark',
markClear: 'Clear all line Marks'
},
lineStyle: {
width: 2,
color: '#1e90ff',
type: 'dashed'
}
},
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Data zoom reset'
}
},
dataView: {
show: true,
title: 'Show Data',
readOnly: false,
lang: ['Data View', 'Close', 'Refresh']
},
magicType: {
show: true,
type: ['line', 'bar'],
title: {
line: 'Line View',
bar: 'Bar View'
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Save as Image',
lang: ['Click Save']
}
}
},
dataZoom: {
show: true,
realtime: true,
showDetail: true,
//orient: 'vertical', // 'horizontal'
//x: 0,
y: 36,
//width: 400,
height: 20,
//backgroundColor: 'rgba(221,160,221,0.5)',
//dataBackgroundColor: 'rgba(138,43,226,0.5)',
//fillerColor: 'rgba(38,143,26,0.6)',
//handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start: 40,
end: 70,
zoomLock: true
},
calculable: true,
grid: {
borderWidth: 0,
y: 80,
y2: 60
},
xAxis: [{
type: 'category',
show: false,
data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel', 'Line1', 'Bar1', 'Scatter1', 'K1', 'Pie1', 'Radar1', 'Chord1', 'Force1', 'Map1', 'Gauge1', 'Funnel1', 'Funnel2', 'Line2', ]
}],
yAxis: [{
type: 'value',
show: false
}],
series: [{
name: 'ECharts例子个数统计',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: [12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 20, 100],
markPoint: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
formatter: function(params) {
return '<img src="' + params.data.symbol.replace('image://', '') + '"/>';
}
},
data: [{
xAxis: 0,
y: 320,
name: 'Line',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/21af6834-2b44-4217-9516-3b2add06114c.png'
}, {
xAxis: 1,
y: 320,
name: 'Bar',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/5268c2b2-0b1f-4373-b235-7f71b6bb4290.png'
}, {
xAxis: 2,
y: 320,
name: 'Scatter',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/69a7df86-0bf6-4cea-a6b6-881a4052ec20.png'
}, {
xAxis: 3,
y: 320,
name: 'K',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/de874b8f-f8df-4905-9650-8efa8f19c015.png'
}, {
xAxis: 4,
y: 320,
name: 'Pie',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/b83f4915-8587-4df5-bde6-308ec0f472b3.png'
}, {
xAxis: 5,
y: 320,
name: 'Radar',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/db739705-c9e3-47bd-a3de-7e757ce0c434.png'
}, {
xAxis: 6,
y: 320,
name: 'Chord',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/131201d2-9154-4391-89e7-73d83c12d33c.png'
}, {
xAxis: 7,
y: 320,
name: 'Force',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/158dd833-a788-4e83-a7fd-ba42addaae31.png'
}, {
xAxis: 8,
y: 320,
name: 'Map',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/b6933882-f367-419e-8f6e-df65ae74a859.png '
}, {
xAxis: 9,
y: 320,
name: 'Gauge',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/bae5221a-02e7-407a-8fa3-36bb8456dafa.png'
}, {
xAxis: 10,
y: 320,
name: 'Funnel',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 11,
y: 320,
name: 'Line1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 12,
y: 320,
name: 'Bar1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 13,
y: 320,
name: 'Scatter1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 14,
y: 320,
name: 'K1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 15,
y: 320,
name: 'Pie1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 16,
y: 320,
name: 'Radar1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 17,
y: 320,
name: 'Chord1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 18,
y: 320,
name: 'Force1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 19,
y: 320,
name: 'Map1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 20,
y: 320,
name: 'Gauge1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 21,
y: 320,
name: 'Funnel1',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/69a7df86-0bf6-4cea-a6b6-881a4052ec20.png'
}, {
xAxis: 22,
y: 320,
name: 'Funnel2',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/5268c2b2-0b1f-4373-b235-7f71b6bb4290.png'
}, {
xAxis: 23,
y: 320,
name: 'Line2',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/21af6834-2b44-4217-9516-3b2add06114c.png'
}, ]
}
}]
};
myAdvertLineChart.setOption(option);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
<div id="advertLineChart" style="width: 100%; height: 350px;"></div>滚动滑块时如何正确滚动图像？提前致谢。