430 lines
11 KiB
JavaScript
430 lines
11 KiB
JavaScript
$(function(){
|
|
// 畅销书排行榜获取高度
|
|
|
|
|
|
|
|
|
|
|
|
var rankH = $('.con li:nth-child(2) .book-rank').height();
|
|
var rankShowH = 3.5*rankH;
|
|
var overHiddenH = rankH*5 + rankShowH;
|
|
$('.book-show').css('height',rankShowH +'px');
|
|
var curBookRank = $('.aside-left li.active .book-rank');
|
|
curBookRank.css('height',rankH +'px');
|
|
|
|
// 获取行高
|
|
var topSpan = $('.aside-left .top .book-rank span');
|
|
var topSpanH = topSpan.height();
|
|
topSpan.css('line-height',topSpanH + 'px');
|
|
|
|
var bottomSpan = $('.aside-left .bottom .book-rank span');
|
|
var bottomSpanH = bottomSpan.height();
|
|
bottomSpan.css('line-height',bottomSpanH + 'px');
|
|
|
|
// 获取各地区销售码洋排行高度
|
|
var areaRankBox = $('.aside-right .area-rank .con');
|
|
var areaRankH = areaRankBox.height();
|
|
var areaRankLiH = Math.round(areaRankH/3);
|
|
areaRankBox.find('li').css('height',areaRankLiH + 'px');
|
|
var areaUl = areaRankBox.children('ul');
|
|
|
|
var areaUlH = areaUl.height();
|
|
// 定时动画效果
|
|
// 销售码洋排行
|
|
var num = 0;
|
|
setInterval(function(){
|
|
num++;
|
|
num > 4?num = 0 : num;
|
|
areaUl.css('top',-(num*areaRankH) + 'px');
|
|
},2000);
|
|
// // 出版社排行
|
|
// function fanzhuan(parent, child,num) {
|
|
|
|
|
|
// var pressNum = -1;
|
|
|
|
// var rankbUl = $(parent);
|
|
// var rankbLen = rankbUl.children().length;
|
|
// setInterval(function () {
|
|
// pressNum++;
|
|
// if (pressNum >=num) {
|
|
// $(child).hide();
|
|
// }
|
|
// if (pressNum > rankbLen) {
|
|
// pressNum = -1;
|
|
// $(child).show();
|
|
// }
|
|
// var curLi = rankbUl.children().eq(pressNum);
|
|
// curLi.children('.book-rank').addClass('pressRotate');
|
|
// curLi.siblings().children('.book-rank').removeClass('pressRotate');
|
|
// }, 1500);
|
|
// }
|
|
// fanzhuan('.aside-left .bottom ul', '.aside-left .bottom li:lt(9)',9)
|
|
// fanzhuan('.aside-left .top ul', '.aside-left .top li:lt(8)', 8)
|
|
|
|
// 畅销书排行
|
|
// var ranktUl = $('.aside-left .top ul');
|
|
// var bookLiLen = ranktUl.children().length;
|
|
|
|
// var bookNum = 0;
|
|
|
|
// var timer01 = setInterval(function(){
|
|
// bookNum++;
|
|
// // debugger
|
|
// if(bookNum%5 == 0){
|
|
// $('.aside-left .top li:lt('+bookNum+')').hide();
|
|
// }
|
|
|
|
// if(bookNum == bookLiLen ){
|
|
// bookNum = 0;
|
|
// ranktUl.children().show();
|
|
// }
|
|
|
|
// ranktUl.children().removeClass('active');
|
|
// ranktUl.children().eq(bookNum).addClass('active');
|
|
|
|
// ranktUl.find('.book-show').hide();
|
|
// ranktUl.children().eq(bookNum).children('.book-show').show();
|
|
// },2000)
|
|
|
|
|
|
|
|
})
|
|
|
|
// // 饼图
|
|
var pie1 = echarts.init(document.getElementById('pie1'),'macarons');
|
|
// var pie2 = echarts.init(document.getElementById('pie2'),'macarons');
|
|
|
|
var rich = {
|
|
big: {
|
|
fontSize: 24,
|
|
lineHeight: 40,
|
|
fontFamily: 'Rubik'
|
|
},
|
|
small: {
|
|
fontSize: 16
|
|
},
|
|
|
|
}
|
|
var pieOption1 = {
|
|
series: [
|
|
{
|
|
name:'分类占比',
|
|
type:'pie',
|
|
radius: ['50%', '70%'],
|
|
hoverOffset: 5,
|
|
center: ['50%','40%'],
|
|
avoidLabelOverlap: false,
|
|
color: ['#0239a7', '#fff', '#24feb4', '#23539b', '#3c9de4'],
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'center'
|
|
}
|
|
,
|
|
emphasis: {
|
|
show: true,
|
|
color: '#fff',
|
|
formatter: function(params, ticket, callback) {
|
|
|
|
return '{big|' + params.value + '}{small|%}\n{small|' + params.name + '}';
|
|
},
|
|
// '{a|这段文本采用样式a}'
|
|
rich: rich
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data:[
|
|
{
|
|
value:0.52,
|
|
name: '科技',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value:0.17,
|
|
name:'少儿',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 0.09,
|
|
name: '社科',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 0.08,
|
|
name: '生活',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value:0.08,
|
|
name: '文艺',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 0.04,
|
|
name: '教育',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 0.007,
|
|
name: '未分',
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}%\n\n{b}'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
pie1.currentIndex = -1;
|
|
pie1.setOption(pieOption1);
|
|
setInterval(function () {
|
|
var dataLen = pieOption1.series[0].data.length;
|
|
// 取消之前高亮的图形
|
|
pie1.dispatchAction({
|
|
type: 'downplay',
|
|
seriesIndex: 0,
|
|
dataIndex: pie1.currentIndex
|
|
});
|
|
pie1.currentIndex = (pie1.currentIndex + 1) % dataLen;
|
|
// 高亮当前图形
|
|
pie1.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 0,
|
|
dataIndex: pie1.currentIndex
|
|
});
|
|
}, 1000);
|
|
// 柱形折线图
|
|
|
|
var trendBar1 = echarts.init(document.getElementById('trendBar1'));
|
|
|
|
var optionBar =
|
|
{
|
|
grid:{
|
|
top: 50,
|
|
bottom: '30%',
|
|
},
|
|
legend: {
|
|
data:['销售码洋', '同比增长'],
|
|
right: '5%',
|
|
itemWidth: 18,
|
|
itemHeight: 12,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'],
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#07bffb'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
name: "码洋(/千)",
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#07bffb'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show:false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
interval:15,
|
|
min: 0,
|
|
max:40,
|
|
position: 'left'
|
|
|
|
},
|
|
// {
|
|
// name: '同比增长(%)',
|
|
// max: 100,
|
|
// min: 0,
|
|
// axisLabel: {
|
|
// formatter: '{value}'
|
|
// },
|
|
// axisLine: {
|
|
// show: false,
|
|
// lineStyle: {
|
|
// color: '#07bffb'
|
|
// }
|
|
// },
|
|
// splitLine: {
|
|
// show:false
|
|
// },
|
|
// axisTick: {
|
|
// show: false
|
|
// },
|
|
// position: 'right'
|
|
// }
|
|
],
|
|
series: [
|
|
{
|
|
name: '销售码洋',
|
|
type: 'bar',
|
|
barWidth: '40%',
|
|
barGap: 5,
|
|
itemStyle:{
|
|
normal:{
|
|
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#00fecc'
|
|
}, {
|
|
offset: 0.8,
|
|
color: '#2690cf'
|
|
}], false)
|
|
}
|
|
},
|
|
data: [25, 26, 24, 27, 23, 22, 25,25,27,28,29,29]
|
|
},
|
|
// {
|
|
// name:'同比增长',
|
|
// type:'line',
|
|
// itemStyle: {
|
|
// color: '#fff'
|
|
// },
|
|
// yAxisIndex: 1,
|
|
// data: [10,8,36,12,24,16,48,32,18,14,66,70]
|
|
// }
|
|
]
|
|
}
|
|
trendBar1.setOption(optionBar);
|
|
// 雷达图
|
|
var leidaChart = echarts.init(document.getElementById("leida"));
|
|
optionLei = {
|
|
backgroundColor: 'transparent',//背景色
|
|
color: ['transparent', 'transparent'],
|
|
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: { bottom: '20%' },
|
|
radar: [
|
|
{
|
|
indicator: [
|
|
{ text: '指标一' },
|
|
{ text: '指标二' },
|
|
{ text: '指标三' },
|
|
{ text: '指标四' },
|
|
],
|
|
|
|
shape: 'circle',
|
|
name: {
|
|
formatter: '【{value}】',
|
|
textStyle: {
|
|
|
|
color: 'rgba(6, 6, 6, 0)'
|
|
}
|
|
},
|
|
splitArea: {
|
|
areaStyle: {
|
|
color: ['transparent',
|
|
'transparent', 'transparent',
|
|
'transparent', 'transparent'],
|
|
|
|
}
|
|
},
|
|
axisLine: {
|
|
// lineStyle: {
|
|
// color: 'rgba(255, 255, 255, 0.5)'
|
|
// }
|
|
},
|
|
splitLine: {
|
|
// lineStyle: {
|
|
// color: 'rgba(255, 255, 255, 0.5)'
|
|
// }
|
|
}
|
|
},
|
|
|
|
],
|
|
series: [
|
|
|
|
{
|
|
name: '雷达图',
|
|
type: 'radar',
|
|
// color: ['#23539b','#24feb4','#fff','#0239a7','#3c9de4'],
|
|
// center: ['50%','40%'],
|
|
zoom: 1,
|
|
itemStyle: {
|
|
emphasis: {
|
|
// color: 各异,
|
|
lineStyle: {
|
|
// width: 4
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal:
|
|
{
|
|
areaStyle: {
|
|
type: 'default',
|
|
color: '#3c9de4'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
data: [
|
|
{
|
|
value: [0.1,0.6,0,0],
|
|
name: '图一',
|
|
symbol: 'rect',
|
|
// symbolSize: 5,
|
|
lineStyle: {
|
|
normal: {
|
|
// type: 'dashed'
|
|
}
|
|
},
|
|
|
|
},
|
|
|
|
|
|
]
|
|
},
|
|
]
|
|
}
|
|
leidaChart.setOption(optionLei); |