style: 添加雷达图

CHANGELOG.md

@@ -76,6 +76,7 @@
  - | 设置小红点 | [9316bcb](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/9316bcb)
  - | 设置界面基本信息板块开发 | [bbaded0](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/bbaded0)
  - | 试题接口 | [f8c137a](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/f8c137a)
+ - | 调整时间轴 | [82645be](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/82645be)
  - | 距调整pc端 | [5069aa1](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/5069aa1)
  - | 适配小程序 | [9e3c45d](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/9e3c45d)
  - | 适配小程序；小程序登录 | [cefc0eb](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/cefc0eb)

package.json

@@ -37,6 +37,7 @@
     "flyio": "^0.6.2",
     "lodash": "^4.17.21",
     "regenerator-runtime": "^0.12.1",
+    "stylus-loader": "^6.2.0",
     "uview-ui": "^1.8.4",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.3",
@@ -69,7 +70,6 @@
     "conventional-changelog-cli": "^2.0.28",
     "core-js": "^3.16.3",
     "cross-env": "^7.0.3",
-    "echarts": "^5.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^6.2.2",

src/components/EvaluationChart/EvaluationChart.vue

@@ -1,48 +1,65 @@
 <template>
-  <view> <view id="myChart" :style="{ width: '300px', height: '300px' }" ref="aaa"></view> </view>
+  <view style="width: 100%; height: 500rpx"><l-echart ref="chart"></l-echart></view>
 </template>
 
 <script>
-// 引入基本模板
+// import * as echarts from 'components/l-echart/echarts';
-let echarts = require('echarts/lib/echarts');
-// 引入柱状图组件
-require('echarts/lib/chart/bar');
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/title');
 
 export default {
-  name: 'hello',
-
   data() {
-    return { msg: 'Welcome to Your Vue.js App' };
+    return {
-  },
+      option: {
-
+        radar: [
-  mounted() {
+          {
-    // this.drawLine();
+            indicator: [
-  },
+              { text: '记忆力', max: 1 },
-
+              { text: '语言能力', max: 1 },
-  methods: {
+              { text: '视空间', max: 1 },
-    drawLine() {
+              { text: '注意力', max: 1 },
-      // 基于准备好的dom，初始化echarts实例
+              { text: '定向力', max: 1 },
-      let myChart = echarts.init(document.getElementById('myChart'));
+              { text: '计算能力', max: 1 },
-      // 绘制图表
+              { text: '逻辑执行', max: 1 },
-      myChart.setOption({
+            ],
-        title: { text: 'ECharts 入门示例' },
+            radius: 80,
-        tooltip: {},
+          },
-        xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
+        ],
-        yAxis: {},
         series: [
           {
-            name: '销量',
+            type: 'radar',
-            type: 'bar',
+            tooltip: { trigger: 'item' },
-            data: [5, 20, 36, 10, 10, 20],
+            areaStyle: {},
+            data: [
+              {
+                value: [0.85, 0.65, 0.62, 0.71, 0.45, 0.55, 0.67],
+                name: 'A Software',
+                symbolSize: 5,
+                areaStyle: { color: 'rgba(24,144,255,.3)' },
+                lineStyle: { color: '#1da5ff' },
+                itemStyle: { color: '#1890ff' },
+              },
+            ],
           },
         ],
-      });
+      },
-    },
+    };
+  },
+  mounted() {
+    // this.$refs.chart.init(config => {
+    //   const { canvas } = config;
+    //   const chart = echarts.init(canvas, null, config);
+    //   canvas.setChart(chart);
+    //   chart.setOption(this.option);
+    //   // 需要把 chart 返回
+    //   return chart;
+    // });
   },
 };
 </script>
 
-<style></style>
+<style>
+.uni-ec-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>