|
|
@@ -1,15 +1,161 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="basicBox">
|
|
|
- <div></div>
|
|
|
+ <div style="width: 95%; height: 100%; margin: 0 auto">
|
|
|
+ <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
|
|
|
+ <div
|
|
|
+ id="charts_canvas"
|
|
|
+ class="echart"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {};
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ randarJson: [
|
|
|
+ { target: "发散性思维", count: 1, value: 4 },
|
|
|
+ { target: "逻辑性思维", count: 1, value: 4 },
|
|
|
+ { target: "聚焦主题", count: 1, value: 5 },
|
|
|
+ { target: "借助多媒体工具", count: 1, value: 4 },
|
|
|
+ { target: "同伴互学", count: 1, value: 4 },
|
|
|
+ { target: "语言准确", count: 1, value: 4.5 },
|
|
|
+ ],
|
|
|
+ chartObj: null,
|
|
|
+ option: {
|
|
|
+ splitNumber: 5,
|
|
|
+ tooltip: {
|
|
|
+ triggerOn: "mousemove",
|
|
|
+ //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
|
|
|
+ confine: true,
|
|
|
+ enterable: true, //鼠标是否可以移动到tooltip区域内
|
|
|
+ backgroundColor: "rgba(255,255,255,0.7)",
|
|
|
+ textStyle: {
|
|
|
+ // 文字样式
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ left: "right",
|
|
|
+ top: "bottom",
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ radius: ["0%", "70%"],
|
|
|
+ shape: "circle",
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ axisName: {
|
|
|
+ textStyle: {
|
|
|
+ // 文字样式
|
|
|
+ color: "#58a5e6",
|
|
|
+ },
|
|
|
+ formatter: function (value, indicator) {
|
|
|
+ // value = value.replace(/\S{2}/g, function (match) {
|
|
|
+ // return match + "\n";
|
|
|
+ // });
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ indicator: [
|
|
|
+ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: "rgba(255,0,0,0)", // 图表背景的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: "rgba(131,141,158,.1)", // 设置网格的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "目标得分占比", // tooltip中的标题
|
|
|
+ type: "radar", // 表示是雷达图
|
|
|
+ symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
|
|
|
+ symbolSize: 8, // 拐点的大小
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 1,
|
|
|
+ opacity: 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ // 设置各个指标原始值
|
|
|
+ value: [],
|
|
|
+ // 设置区域边框和区域的颜色
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#58a5e6",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#58a5e6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInfo() {
|
|
|
+ this.setChart();
|
|
|
+ },
|
|
|
+ setChart() {
|
|
|
+ // 雷达图显示的标签
|
|
|
+ let newPromise = new Promise((resolve) => {
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ //然后异步执行echarts的初始化函数
|
|
|
+ newPromise.then(() => {
|
|
|
+ if (this.randarJson.length) {
|
|
|
+ const chartObj = this.$echarts.init(
|
|
|
+ //劳动课程
|
|
|
+ this.$el.querySelector("#charts_canvas")
|
|
|
+ );
|
|
|
+ let radarOption = JSON.parse(JSON.stringify(this.option));
|
|
|
+ for (var i = 0; i < this.randarJson.length; i++) {
|
|
|
+ radarOption.radar.indicator.push({
|
|
|
+ name: this.randarJson[i].target,
|
|
|
+ max: 5,
|
|
|
+ });
|
|
|
+ radarOption.series[0].data[0].value.push(
|
|
|
+ (this.randarJson[i].value / this.randarJson[i].count).toFixed(1)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ this.chartObj = chartObj;
|
|
|
+ this.chartObj.setOption(radarOption);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let _this = this;
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ if (_this.chartObj) {
|
|
|
+ _this.chartObj.resize();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ userid(newValue, oldValue) {
|
|
|
+ this.getInfo();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getInfo();
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
</style>
|
