sourcecode/front/project/www/routes/paper/report/page.js

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';
import { Question } from '../../../stores/question';

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 {
  initData() {
    const { id } = this.params;
    Question.detailReport(id).then(result => {
      switch (result.paperModule) {
        case 'sentence':
          this.refreshSentence(result);
          break;
        case 'textbook':
          this.refreshTextbook(result);
          break;
        case 'exercise':
          this.refreshExercise(result);
          break;
        case 'examination':
          this.refreshExamination(result);
          break;
        default:
      }
      this.setState({ report: result });
    });
  }

  refreshSentence() {

  }

  refreshTextbook() {

  }

  refreshExamination() {

  }

  refreshExercise() {

  }

  renderView() {
    const { report = {} } = this.state;
    switch (report.paperModule) {
      case 'sentence':
        return this.renderSentence();
      case 'textbook':
        return this.renderTextbook();
      case 'exercise':
        return this.renderExercise();
      case 'examination':
        return this.renderExamination();
      default:
        return <div />;
    }
  }

  renderSentence() {
    return <div />;
  }

  renderTextbook() {
    return <div />;
  }

  renderExercise() {
    return (
      <div>
        <div className="content">
          <LineChart option={lineOption} />
          <BarChart option={bar1Option} />
          <BarChart option={bar2Option} />
          <BarChart option={bar3Option} />
          <BarChart option={barOption} />
          <PieChart option={pieOption} />
        </div>
      </div>
    );
  }

  renderExamination() {
    return <div />;
  }
}