echarts 柱状配置项内容和展示
配置项如下
//------------------------------------引用请注明出处
var myDataArr = {
1: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
2: [
'景山', '北海公园', '后海',
'大栅栏', '天安门', '故宫',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
3: [
'大栅栏', '景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'大栅栏', '潘家园', '琉璃厂',
'南锣鼓巷', '工体', '天安门', '故宫'
],
4: [
'大栅栏', '天安门', '故宫',
'什刹海', '西单', '玉渊潭',
'南锣鼓巷', '工体', '潘家园', '琉璃厂',
'中央电视塔', '东单', '王府井',
'景山', '北海公园', '后海',
],
5: [
'大栅栏',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'天安门', '故宫',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
6: [
'大栅栏', '天安门', '故宫',
'南锣鼓巷', '工体', '潘家园', '琉璃厂',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
],
7: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
8: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
9: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
10: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
11: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
12: [
'大栅栏', '天安门', '故宫',
'景山', '北海公园', '后海',
'什刹海', '西单', '玉渊潭',
'中央电视塔', '东单', '王府井',
'南锣鼓巷', '工体', '潘家园', '琉璃厂'
],
};
var databeauty = {
1: [121, 388, 233, 309, 133, 308, 297, 283, 349, 273, 229, 238, 224, 291, 185, 203],
2: [200, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 500, 350, 300, 250],
3: [380, 129, 173, 101, 310, 393, 386, 296, 366, 268, 208, 149, 356, 239, 208, 330],
4: [363, 396, 388, 108, 325, 120, 180, 292, 200, 309, 223, 236, 209, 271, 215, 216],
5: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
6: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
7: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163],
8: [389, 259, 262, 324, 232, 176, 196, 214, 133, 370, 268, 360, 185, 392, 392, 153],
9: [111, 315, 139, 375, 204, 352, 163, 258, 385, 209, 209, 243, 204, 352, 163, 258],
10: [227, 210, 328, 292, 241, 110, 130, 185, 392, 392, 153, 187, 150, 200, 250, 300],
11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250],
12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163],
};
var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
option = {
baseOption: {
backgroundColor: '#000',
timeline: {
show: true,
axisType: 'category',
autoPlay: true,
currentIndex: 6,
playInterval: 1500,
label: {
normal: {
show: true,
interval: 'auto',
formatter: '{value}月',
},
},
data: [],
},
grid: [{
left: '4%',
top: 60,
bottom: 60,
containLabel: true,
}, ],
xAxis: [{
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: true,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid',
},
},
}, ],
yAxis: [{
type: 'category',
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontSize: 12,
},
},
data: [],
}],
series: [],
},
options: [],
animationEasingUpdate: 'quinticInOut',
animationDurationUpdate: 1500, //动画效果
};
for (var i = 0; i < timeLineData.length; i++) {
option.baseOption.timeline.data.push(timeLineData[i]);
option.options.push({
yAxis:[{
data:myDataArr[timeLineData[i]]
}],
series: [{
name: '美女',
type: 'bar',
barGap: 20,
barWidth: 20,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'right',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
'#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
'#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
];
return colorList[myDataArr[i].indexOf(params.name)]
},
}
},
data: databeauty[timeLineData[i]],
}]
});
}
截图如下
