|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="textanalysis_index">
|
|
|
+ <div class="textanalysis_index" v-loading="loading">
|
|
|
<div class="wheader">
|
|
|
<Header />
|
|
|
</div>
|
|
@@ -7,22 +7,13 @@
|
|
|
<div>
|
|
|
<div class="left">
|
|
|
<div class="top_nav">
|
|
|
- <div
|
|
|
- :class="[leftNavIndex == 1 ? 'sele' : '']"
|
|
|
- @click="cutNav('1')"
|
|
|
- >
|
|
|
+ <div :class="[leftNavIndex == 0 ? 'sele' : '']" @click="cutNav(0)">
|
|
|
音节
|
|
|
</div>
|
|
|
- <div
|
|
|
- :class="[leftNavIndex == 2 ? 'sele' : '']"
|
|
|
- @click="cutNav('2')"
|
|
|
- >
|
|
|
+ <div :class="[leftNavIndex == 1 ? 'sele' : '']" @click="cutNav(1)">
|
|
|
汉字
|
|
|
</div>
|
|
|
- <div
|
|
|
- :class="[leftNavIndex == 3 ? 'sele' : '']"
|
|
|
- @click="cutNav('3')"
|
|
|
- >
|
|
|
+ <div :class="[leftNavIndex == 2 ? 'sele' : '']" @click="cutNav(2)">
|
|
|
词汇
|
|
|
</div>
|
|
|
</div>
|
|
@@ -69,13 +60,13 @@
|
|
|
<div class="left_list_nav">
|
|
|
<div class="left">
|
|
|
<span
|
|
|
- :class="[headerText == 'header' ? 'sele' : '']"
|
|
|
- @click="cutHeaderText('header')"
|
|
|
+ :class="[headerText == 'wordCount' ? 'sele' : '']"
|
|
|
+ @click="cutHeaderText('wordCount')"
|
|
|
>词头</span
|
|
|
>
|
|
|
<span
|
|
|
- :class="[headerText == 'text' ? 'sele' : '']"
|
|
|
- @click="cutHeaderText('text')"
|
|
|
+ :class="[headerText == 'textCount' ? 'sele' : '']"
|
|
|
+ @click="cutHeaderText('textCount')"
|
|
|
>文本</span
|
|
|
>
|
|
|
</div>
|
|
@@ -87,6 +78,7 @@
|
|
|
:width="26"
|
|
|
style="margin-right: 10px"
|
|
|
active-text="细分"
|
|
|
+ @change="getstatistics"
|
|
|
>
|
|
|
</el-switch>
|
|
|
</span>
|
|
@@ -99,21 +91,36 @@
|
|
|
<div class="left_list_main">
|
|
|
<div v-for="(item, index) in leftList" :key="'one' + index">
|
|
|
<div class="leftType">
|
|
|
- <span class="color"></span>
|
|
|
- <span class="type">{{ item.key }}</span>
|
|
|
+ <span
|
|
|
+ class="color"
|
|
|
+ :style="{
|
|
|
+ background:
|
|
|
+ item.name && levelMap[item.name]
|
|
|
+ ? levelMap[item.name].color
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ <span class="type">{{ item.name }}</span>
|
|
|
</div>
|
|
|
<div class="rightCount">
|
|
|
<span class="count">{{ item.value }}</span>
|
|
|
- <span class="precent">{{ item.percentage }}</span>
|
|
|
+ <span class="precent">{{ item.ratio }}%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tubiao" id="echarts">
|
|
|
<div class="tubiao_top">
|
|
|
- {{ currentTBdata.key }}
|
|
|
- {{ currentTBdata.value }}
|
|
|
- {{ currentTBdata.percentage }}
|
|
|
+ <span v-show="currentTBdata.name">
|
|
|
+ {{ currentTBdata.name }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span v-show="currentTBdata.value">
|
|
|
+ {{ currentTBdata.value }}
|
|
|
+ </span>
|
|
|
+ <span v-show="currentTBdata.ratio">
|
|
|
+ {{ currentTBdata.ratio }}%
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div id="main_echarts" class="main_echarts"></div>
|
|
|
<div class="cut_download">
|
|
@@ -229,43 +236,20 @@ import * as echarts from "echarts";
|
|
|
import "echarts/lib/chart/bar";
|
|
|
import "echarts/lib/component/legend";
|
|
|
import "echarts/lib/component/title";
|
|
|
+import { postapi } from "@/api/api";
|
|
|
+import staticData from "../../common/data";
|
|
|
export default {
|
|
|
components: {
|
|
|
Header,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading: false,
|
|
|
wordFontsize: 20, // 文章内容字体
|
|
|
fenci: false,
|
|
|
pinyinShow: false,
|
|
|
leftNavIndex: 1,
|
|
|
- leftList: [
|
|
|
- {
|
|
|
- key: "初等1级",
|
|
|
- value: "40",
|
|
|
- percentage: "20.00%",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "初等2级",
|
|
|
- value: "39",
|
|
|
- percentage: "20.00%",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "初等3级",
|
|
|
- value: "28",
|
|
|
- percentage: "10.00%",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "中等1级",
|
|
|
- value: "40",
|
|
|
- percentage: "10.00%",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "中等2级",
|
|
|
- value: "40",
|
|
|
- percentage: "10.10%",
|
|
|
- },
|
|
|
- ],
|
|
|
+ leftList: null,
|
|
|
colorValue: "#FF3737",
|
|
|
searchVal: "",
|
|
|
isSCL: false,
|
|
@@ -284,11 +268,15 @@ export default {
|
|
|
SearchwordNumber: 0,
|
|
|
searchWord: [],
|
|
|
type: "",
|
|
|
- headerText: "header",
|
|
|
+ headerText: "wordCount",
|
|
|
xifen: false,
|
|
|
myChart: null,
|
|
|
currentTBdata: {},
|
|
|
currentcolorValue: [],
|
|
|
+ subjectWords: null,
|
|
|
+ partitionKey: null,
|
|
|
+ base: {},
|
|
|
+ levelMap: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -310,6 +298,7 @@ export default {
|
|
|
},
|
|
|
cutNav(index) {
|
|
|
this.leftNavIndex = index;
|
|
|
+ this.getstatistics();
|
|
|
},
|
|
|
showSearchColorList() {
|
|
|
this.isSCL = !this.isSCL;
|
|
@@ -344,6 +333,7 @@ export default {
|
|
|
},
|
|
|
cutHeaderText(type) {
|
|
|
this.headerText = type;
|
|
|
+ this.getstatistics();
|
|
|
},
|
|
|
// 添加dom
|
|
|
addnode() {
|
|
@@ -378,15 +368,15 @@ export default {
|
|
|
let leidaList = [];
|
|
|
newdata.forEach((item) => {
|
|
|
item.value = item.value;
|
|
|
- item.name = item.key + " " + (item.percentage * 100).toFixed(2) + "%";
|
|
|
- name.push(item.key);
|
|
|
+ item.name = item.name;
|
|
|
+ name.push(item.name);
|
|
|
valueStype.push({
|
|
|
value: item.value,
|
|
|
- percent: (item.percentage * 100).toFixed(2) + "%",
|
|
|
+ percent: item.ratio + "%",
|
|
|
});
|
|
|
value.push(item.value);
|
|
|
leidaList.push({
|
|
|
- name: item.key,
|
|
|
+ name: item.name,
|
|
|
// max: data[data.length - 1].number,
|
|
|
// max: 100, //这个总数需要等接口
|
|
|
});
|
|
@@ -410,13 +400,13 @@ export default {
|
|
|
borderColor: "#f5f5f5",
|
|
|
borderWidth: 5,
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
- },
|
|
|
- },
|
|
|
+ // emphasis: {
|
|
|
+ // itemStyle: {
|
|
|
+ // shadowBlur: 1,
|
|
|
+ // shadowOffsetX: 0,
|
|
|
+ // shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
},
|
|
|
],
|
|
|
xAxis: {
|
|
@@ -443,6 +433,15 @@ export default {
|
|
|
type: "shadow",
|
|
|
},
|
|
|
},
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: "slider", //slider表示有滑动块的,inside表示内置的
|
|
|
+ show: true,
|
|
|
+ xAxisIndex: 0,
|
|
|
+ start: 50,
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ],
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: name,
|
|
@@ -457,8 +456,6 @@ export default {
|
|
|
str += s;
|
|
|
str += "\n";
|
|
|
}
|
|
|
- console.log(str);
|
|
|
-
|
|
|
return str;
|
|
|
},
|
|
|
},
|
|
@@ -466,9 +463,15 @@ export default {
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ left: 1,
|
|
|
+ right: 1,
|
|
|
+ bottom: 1,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- name: "Direct",
|
|
|
+ name: "",
|
|
|
data: valueStype,
|
|
|
type: "bar",
|
|
|
// label: {
|
|
@@ -513,6 +516,12 @@ export default {
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ left: 1,
|
|
|
+ right: 1,
|
|
|
+ bottom: 1,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
data: value,
|
|
@@ -560,33 +569,7 @@ export default {
|
|
|
},
|
|
|
series: buildSeries(value),
|
|
|
};
|
|
|
- // option = {
|
|
|
- // tooltip: {
|
|
|
- // trigger: "axis",
|
|
|
- // },
|
|
|
- // radar: [
|
|
|
- // {
|
|
|
- // indicator: leidaList,
|
|
|
- // center: ["50%", "60%"],
|
|
|
- // radius: 150,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // type: "radar",
|
|
|
- // tooltip: {
|
|
|
- // trigger: "item",
|
|
|
- // },
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // value: value,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // };
|
|
|
}
|
|
|
- console.log(option);
|
|
|
option && this.myChart.setOption(option);
|
|
|
let that = this;
|
|
|
this.myChart.on("click", function (parms) {
|
|
@@ -611,17 +594,49 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ // 获取图标统计信息
|
|
|
+ getstatistics() {
|
|
|
+ this.loading = true;
|
|
|
+ postapi({
|
|
|
+ url: "GCLSTRCServer/tools/TS/statistics",
|
|
|
+ data: {
|
|
|
+ searchType: this.leftNavIndex,
|
|
|
+ partitionKey: this.partitionKey,
|
|
|
+ statisticsType: this.xifen ? 0 : 1,
|
|
|
+ base:
|
|
|
+ this.headerText == "wordCount"
|
|
|
+ ? this.base.wordCount
|
|
|
+ : this.base.textCount,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.leftList = res.data.result;
|
|
|
+ this.createEcharts("main_echarts", "柱状图", this.leftList, 0);
|
|
|
+
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.createEcharts("main_echarts", "饼状图", this.leftList, 0);
|
|
|
+ created() {
|
|
|
+ this.partitionKey = this.$route.query.partitionKey * 1;
|
|
|
+ this.subjectWords = this.$route.query.subjectWords;
|
|
|
+ this.base.textCount = this.$route.query.textCount * 1;
|
|
|
+ this.base.wordCount = this.$route.query.wordCount * 1;
|
|
|
+ this.levelMap = staticData.LevelMap;
|
|
|
+
|
|
|
+ this.getstatistics();
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.textanalysis_index {
|
|
|
background: #f6f6f6;
|
|
|
- height: 100%;
|
|
|
+ min-height: 100%;
|
|
|
.wheader {
|
|
|
background: #ffffff;
|
|
|
}
|
|
@@ -878,13 +893,14 @@ export default {
|
|
|
.tubiao {
|
|
|
width: 352px;
|
|
|
margin: 0 auto;
|
|
|
- height: 398px;
|
|
|
+ height: 374px;
|
|
|
background: #f5f5f5;
|
|
|
border-radius: 4px;
|
|
|
margin-top: 24px;
|
|
|
- padding-top: 24px;
|
|
|
position: relative;
|
|
|
+ padding-top: 24px;
|
|
|
.tubiao_top {
|
|
|
+ height: 22px;
|
|
|
margin-bottom: 24px;
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|