import React from 'react'; import './index.less'; import LineChart from '@src/components/LineChart'; import BarChart from '@src/components/BarChart'; import PieChart from '@src/components/PieChart'; import Page from '@src/containers/Page'; const lineOption = { title: { text: '每题用时情况', textStyle: { fontSize: 24, fontWeight: 'normal', color: '#5e677b' }, }, tooltip: { trigger: 'axis', }, legend: { data: ['我的', '全站'], right: 20, orient: 'vertical', }, xAxis: { type: 'category', }, yAxis: { type: 'value', min: 0, }, dataset: { source: [['type', '我的', '全站'], ['1', 43.3, 85.8], ['2', 43.1, 73.4], ['3', 56.4, 65.2]], }, series: [ { type: 'line', smooth: true, color: '#8684df', }, { type: 'line', smooth: true, color: '#5195e5', }, ], }; const barOption = { title: { text: '正确率', textStyle: { fontSize: 24, fontWeight: 'normal', color: '#5e677b' }, }, tooltip: { trigger: 'axis', }, legend: { data: ['我的', '全站'], right: 20, orient: 'vertical', }, dataset: { source: [['type', '我的', '全站'], ['Easy', 43.3, 85.8], ['Medium', 43.1, 73.4], ['Hard', 56.4, 65.2]], }, xAxis: { type: 'category', boundaryGap: true }, yAxis: { min: 0, max: 100, }, series: [{ type: 'bar', barWidth: 40, color: '#8684df' }, { type: 'bar', barWidth: 40, color: '#5195e5' }], }; const bar1Option = { title: { text: '用时', textStyle: { fontSize: 24, fontWeight: 'normal', color: '#5e677b' }, }, dataset: { source: [['type', 'text'], ['Avg Time Total', 43.3], ['Avg Time Correct', 43.1], ['Avg Time Incorrect', 56.4]], }, xAxis: { type: 'category', axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false } }, yAxis: { show: false, min: 0, max: 100, axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false }, }, series: [{ type: 'bar', barWidth: 40, color: '#8684df' }], }; const bar2Option = { title: { text: '正确率', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#5e677b' }, left: 240, }, dataset: { source: [['type', '我的'], ['Avg Time Total', 43.3], ['Avg Time Correct', 43.1], ['Avg Time Incorrect', 56.4]], }, grid: { left: 240 }, xAxis: { show: false, axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false }, }, yAxis: { type: 'category', show: true, axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false }, axisLabel: { fontSize: 18, fontWeight: 'normal', color: '#5e677b' }, offset: 36, }, series: [ { type: 'bar', barWidth: 40, color: '#8684df', label: { normal: { show: true, position: 'insideLeft', distance: 15, }, }, }, ], }; const bar3Option = { title: { text: '平均用时', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#5e677b' }, left: '10%', }, dataset: { source: [['type', '我的'], ['Avg Time Total', 43.3], ['Avg Time Correct', 43.1], ['Avg Time Incorrect', 56.4]], }, xAxis: { show: false, axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false }, }, yAxis: { type: 'category', show: true, axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, }, series: [ { type: 'bar', barWidth: 40, color: '#8684df', label: { normal: { show: true, position: 'insideLeft', distance: 15, }, }, }, ], }; const pieOption = { visualMap: { show: false, min: 0, max: 800, inRange: { colorLightness: [1, 0], }, }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '50%'], roseType: 'radius', label: { normal: { fontSize: 18, position: 'inside', }, }, itemStyle: { normal: { color: '#5195e5', shadowBlur: 40, shadowColor: 'rgba(0, 0, 0, 0.2)', }, }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: () => { return Math.random() * 200; }, data: [{ value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 274, name: '联盟广告' }].sort( (a, b) => { return a.value - b.value; }, ), }, ], }; export default class extends Page { renderView() { return (
); } }