update

src/components/detail/NavDetail.vue

@@ -270,90 +270,78 @@ export default {
       var myChart = this.$echarts.init(
           document.getElementById('ManuEchart')
       );
-      var MyOption = {
+      var option = {
         tooltip: {
-          trigger: 'item',
-          axisPointer: {
-            type: 'shadow'
+          trigger: 'axis'
         },
-          dataZoom: [{
-            type: 'slider', // 设置为滑动条型式
-            show: true, // 显示dataZoom组件
-            start: 0, // 默认显示的起始位置为0
-            end: 30, // 默认显示的结束位置为100
-            handleSize: 8, // 滑动条的手柄大小
-            handleStyle: {
-              color: '#DCE2E8' // 滑动条的手柄颜色
-            },
-            xAxisIndex: [0], // 表示控制第一个x轴
-            filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
-          }]
-          ,
-          backgroundColor: '#fff', // 悬浮框背景色
-          borderColor: '#000', // 悬浮框边框颜色
-          borderWidth: 1, // 悬浮框边框宽度
-          textStyle: { // 悬浮框文字样式
-            color: '#000',
-            fontSize: 12
-          }
-        },
-        xAxis: {
+        xAxis: [{
           type: 'category',
           data: xline,
           axisLine: {
-            show: true,
             lineStyle: {
-              color: '#76aaff',
-              width: 2,
-              type: "solid"
+              color: "#ffffff"
             }
           }
-        },
-        yAxis: {
+        }],
+        yAxis: [{
           type: 'value',
+          splitNumber: 4,
           splitLine: {
             lineStyle: {
-              color: '#76aaff',
+              type: 'dashed',
+              color: '#DDD'
             }
           },
           axisLine: {
-            show: true,
+            show: false,
             lineStyle: {
-              color: '#76aaff',
-              width: 2,
-              type: "solid"
+              color: "#ffffff"
+            },
+          },
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          splitArea: {
+            show: false
           }
-          },
-          axisLabel: {//y轴文字的配置
-            textStyle: {
-              color: '#76aaff',
-              margin: 15
-            },
-            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
-          }
-        },
-        series: [
-          {
-            data: yline,
+        }],
+        series: [{
+          name: '访问量',
           type: 'line',
-            label: {//文字的显示
-              show: true, //默认  显示文字
-            }
-          },
-          {
           data: yline,
-            type: 'bar'
+          lineStyle: {
+            normal: {
+              width: 8,
+              color: {
+                type: 'linear',
+
+                colorStops: [{
+                  offset: 0,
+                  color: '#A9F387' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#48D8BF' // 100% 处的颜色
+                }],
+                globalCoord: false // 缺省为 false
               },
-        ],
-        dataZoom: {
-          yAxisIndex: [0],
-          type: 'inside',
-          start: 0,
-          end: 100,
-          zoomLock: true,
+              shadowColor: 'rgba(72,216,191, 0.3)',
+              shadowBlur: 10,
+              shadowOffsetY: 20
             }
+          },
+          itemStyle: {
+            normal: {
+              color: '#fff',
+              borderWidth: 10,
+              /*shadowColor: 'rgba(72,216,191, 0.3)',
+              shadowBlur: 100,*/
+              borderColor: "#A9F387"
             }
-      myChart.setOption(MyOption, true);
+          },
+          smooth: true
+        }]
+      };
+      myChart.setOption(option, true);
     },
     // 获取标签对象
     GetNav(id) {