Browse Source

添加TrendCon和Newly注解

gxr 4 years ago
parent
commit
2f5db6e28a
2 changed files with 17 additions and 15 deletions
  1. 4 2
      echarts-screen/src/components/Newly.vue
  2. 13 13
      echarts-screen/src/components/TrendCon.vue

+ 4 - 2
echarts-screen/src/components/Newly.vue

@@ -36,9 +36,8 @@ export default {
   data() {
     return {
       timer: null,
-      // tabTitle: ['2015', '2016', '2017', '2018', '2019', '2020'],
       tabTitle: ['2019.12', '2020.1', '2020.2', '2020.4', '2020.6', '2020.7'],
-      tabCon: [
+      tabCon: [ //tab内容切换
         [
           '2019年12月底,湖北省武汉市疾控中心监测发现不明原因肺炎病例。',
           '2019.12.30,武汉市卫生健康委向辖区医疗机构发布《关于做好不明原因肺炎救治工作的紧急通知》。',
@@ -72,10 +71,13 @@ export default {
       cur: 0, //默认选中第一个tab
     }
   },
+
+  // 生命周期函数  页面刷新时调用
   mounted() {
     this.getTimer();
   },
   methods: {
+    //这个是要执行的函数
     getTimer() {
       this.timer = setInterval(() => {
         this.cur++;

+ 13 - 13
echarts-screen/src/components/TrendCon.vue

@@ -32,22 +32,22 @@ export default {
       var xData = function () {
         var data = [];
         for (var i = 1; i < 12; i++) {
-          data.push(i + "月");
+          data.push(i + "月");   //日期格式
         }
         return data;
       }();
       // var fontColor = '#30eee9';
       let option = {
         // backgroundColor: '#11183c',
-        grid: {
+        grid: {   //图表距边框的距离
           left: '5%', // 组件离容器左侧的距离,百分比字符串或整型数字
           right: '2%',
           top: '10%', // 组件离容器上侧的距离,百分比字符串或整型数字
           bottom: '15%',
           containLabel: true //grid 区域是否包含坐标轴的刻度标签,
         },
-        tooltip: {
-          trigger: 'axis', //触发类型
+        tooltip: {  //点击折点 展示的样式
+          trigger: 'axis', //折线图触发类型(圆点)
           axisPointer: {
             type: 'line',
             lineStyle: {
@@ -55,7 +55,7 @@ export default {
             }
           }
         },
-        toolbox: {
+        toolbox: {  // 右侧小工具
           feature: {
             mytool: {
               show: true,
@@ -77,7 +77,7 @@ export default {
           },
         },
         legend: {
-          data: ['现有疑似', '现有确诊', '累计确诊'],
+          data: ['现有疑似', '现有确诊', '累计确诊'], // 头部折线标题
           itemWidth: 20,
           itemHeight: 10,
           textStyle: {
@@ -88,10 +88,10 @@ export default {
           top: "5%"
           // left : '50%'
         },
-        xAxis: [{
+        xAxis: [{  //x轴的配置显示
           type: 'category',
           boundaryGap: false,
-          axisLabel: {
+          axisLabel: { // 显示所有X轴数据
             color: '#65aaf1'
           },
           axisLine: {
@@ -112,7 +112,7 @@ export default {
               },*/
           data:xData
         }],
-        yAxis: [{
+        yAxis: [{  //y轴的配置显示
           type: 'value',
           // name: 'kw/h',
           min: 0,
@@ -143,13 +143,13 @@ export default {
             }
           }
         }],
-        series: [{
+        series: [{  //y轴展示的数据
           name: '现有疑似',
           type: 'line',
           stack: '总量',
           symbol: 'circle', //设置折线连接点样式
           showSymbol: false,
-          symbolSize: 1, //调整小圆点大小
+          symbolSize: 1, //调整折线小圆点大小
           itemStyle: {
             normal: {
               color: '#0092f6',
@@ -184,7 +184,7 @@ export default {
             stack: '总量',
             symbol: 'circle', //设置折线连接点样式
             showSymbol: false,
-            symbolSize: 1, //调整小圆点大小
+            symbolSize: 1, //调整折线小圆点大小
 
             itemStyle: {
               normal: {
@@ -213,7 +213,7 @@ export default {
             stack: '总量',
             symbol: 'circle', //设置折线连接点样式
             showSymbol: false,
-            symbolSize: 1, //调整小圆点大小
+            symbolSize: 1, //调整折线小圆点大小
             itemStyle: {
               normal: {
                 color: '#aecb56',