123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445 |
- (function () {
-
- var setFont = function () {
-
- var html = document.documentElement;
-
- var width = html.clientWidth;
-
- if (width < 1024) width = 1024
- if (width > 1920) width = 1920
-
- var fontSize = width / 80 + 'px';
-
- html.style.fontSize = fontSize;
- }
- setFont();
-
-
- window.onresize = function () {
- setFont();
- }
- })();
- (function () {
-
- $('.monitor').on('click', ' a', function () {
-
- $(this).addClass('active').siblings().removeClass('active');
-
- var index = $(this).index();
-
- $('.content').eq(index).show().siblings('.content').hide();
- });
-
-
-
-
- $('.monitor .marquee').each(function (index, dom) {
-
- var rows = $(dom).children().clone();
-
- $(dom).append(rows);
- });
- })();
- (function () {
- var myechart = echarts.init($('.pie')[0]);
- option = {
-
- tooltip: {
-
- trigger: 'item',
-
-
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
-
- series: [
- {
-
- name: '地区',
-
- type: 'pie',
-
-
- radius: ['10%', '70%'],
-
- center: ['50%', '50%'],
-
- roseType: 'radius',
-
- data: [
- { value: 20, name: '云南' },
- { value: 5, name: '北京' },
- { value: 15, name: '山东' },
- { value: 25, name: '河北' },
- { value: 20, name: '江苏' },
- { value: 35, name: '浙江' },
- { value: 30, name: '四川' },
- { value: 40, name: '湖北' }
- ],
-
- label: {
- fontSize: 10
- },
-
- labelLine: {
- length: 8,
- length2: 10
- }
- }
- ],
- color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
- };
- myechart.setOption(option);
- })();
- (function () {
-
- var item = {
- name: '',
- value: 1200,
-
- itemStyle: {
- color: '#254065'
- },
-
- emphasis: {
- itemStyle: {
- color: '#254065'
- }
- },
-
- tooltip: {
- extraCssText: 'opacity:0'
- }
- };
- option = {
-
- tooltip: {
-
- trigger: 'item',
-
- axisPointer: {
-
- type: 'shadow'
- }
- },
-
- grid: {
-
- left: '0',
- right: '3%',
- bottom: '3%',
- top: '5%',
-
- containLabel: true,
-
- show: true,
-
- borderColor: 'rgba(0, 240, 255, 0.3)'
- },
-
- xAxis: [
- {
-
- type: 'category',
-
- data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
-
- axisTick: {
-
-
- alignWithLabel: false,
- show: false
- },
-
- axisLabel: {
- color: '#4c9bfd'
- }
- }
- ],
-
- yAxis: [
- {
-
- type: 'value',
- axisTick: {
-
-
- alignWithLabel: false,
- show: false
- },
-
- axisLabel: {
- color: '#4c9bfd'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(0, 240, 255, 0.3)'
- }
- },
- }
- ],
-
- series: [
- {
-
-
- itemStyle: {
-
- color: new echarts.graphic.LinearGradient(
-
- 0, 0, 0, 1,
- [
- { offset: 0, color: '#00fffb' },
- { offset: 1, color: '#0061ce' }
- ]
- )
- },
-
- name: '用户统计',
-
- type: 'bar',
-
- barWidth: '60%',
-
- data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
- }
- ]
- };
- var myechart = echarts.init($('.users .bar')[0]);
- myechart.setOption(option);
- })();
- (function () {
- var data = {
- day365: { orders: '20,301,987', amount: '99834' },
- day90: { orders: '301,987', amount: '9834' },
- day30: { orders: '1,987', amount: '3834' },
- day1: { orders: '987', amount: '834' }
- }
-
- $('.order').on('click', '.filter a', function () {
-
- $(this).addClass('active').siblings().removeClass('active');
-
- var key = $(this).attr('data-key');
-
-
- key = data[key];
- $('.order .item h4:eq(0)').text(key.orders);
- $('.order .item h4:eq(1)').text(key.amount);
- });
-
- var index = 0;
- var aclick = $('.order a');
- setInterval(function () {
- index++;
- if (index > 3) {
- index = 0;
- }
-
- aclick.eq(index).click();
- }, 3000);
- })();
- (function () {
- var option = {
-
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
-
- type: 'category',
-
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#4c9bfd'
- },
- axisLine: {
- show: false
- },
- boundaryGap: false
- },
- yAxis: {
-
- type: 'value',
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#4c9bfd'
- },
- axisLine: {
- show: false
- },
- boundaryGap: false
- },
-
- legend: {
- textStyle: {
- color: '#4c9bfd'
- },
- right: '10%'
- },
-
- grid: {
- show: true,
- top: '20%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- borderColor: '#012f4a',
- containLabel: true
- },
- series: [{
- name: '预期销售额',
-
- data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
-
- type: 'line',
-
- smooth: true,
- itemStyle: {
- color: '#00f2f1'
- }
- },
- {
- name: '实际销售额',
-
- data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
-
- type: 'line',
-
- smooth: true,
- itemStyle: {
- color: '#ed3f35'
- }
- }]
- };
- var myechart = echarts.init($('.line')[0]);
- myechart.setOption(option);
-
- var data = {
- year: [
- [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
- [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
- ],
- quarter: [
- [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
- [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
- ],
- month: [
- [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
- [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
- ],
- week: [
- [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
- [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
- ]
- }
- $('.sales ').on('click', '.caption a', function () {
- $(this).addClass('active').siblings('a').removeClass('active');
-
-
- var key = $(this).attr('data-type');
-
- key = data[key];
-
- option.series[0].data = key[0];
- option.series[1].data = key[1];
-
- myechart.setOption(option);
- });
-
- var index = 0;
- var timer = setInterval(function () {
- index++;
- if (index > 4) {
- index = 0;
- };
- $('.sales .caption a').eq(index).click();
- }, 2000);
- })();
- (function () {
- var option = {
- series: [
- {
- type: 'pie',
- radius: ['130%', '150%'],
- center: ['50%', '80%'],
- label: {
- show: false,
- },
- startAngle: 180,
- hoverOffset: 0,
- data: [
- {
- value: 100,
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#00c9e0' },
- { offset: 1, color: '#005fc1' }
- ]
- }
- }
- },
- { value: 100, itemStyle: { color: '#12274d' } },
- { value: 200, itemStyle: { color: 'transparent' } }
- ]
- }
- ]
- };
- var myechart = echarts.init($('.gauge')[0]);
- myechart.setOption(option);
- })();
- (function () {
- var data = [
- { name: '可爱多', num: '9,086' },
- { name: '娃哈哈', num: '8,341' },
- { name: '喜之郎', num: '7,407' },
- { name: '八喜', num: '6,080' },
- { name: '小洋人', num: '6,724' },
- { name: '好多鱼', num: '2,170' },
- ]
- $('.inner').on('mouseenter', '.sup li', function () {
- $(this).addClass('active').siblings().removeClass('active');
-
-
- var radomData = data.sort(function (a, b) { return 0.5 - Math.random() });
- var html = '';
- radomData.forEach(function (item) {
- html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`;
- });
-
- $('.sub').html(html);
- });
- $('.province .sup li').eq(0).mouseenter();
- var index = 0;
- var timer = setInterval(() => {
- index++;
- if (index > 5) {
- index = 0;
- }
- $('.sup li').eq(index).mouseenter();
- }, 2000);
- })();
|