瀏覽代碼

动画效果服务一汽

bihuisong 11 月之前
父節點
當前提交
8727ca30ae
共有 1 個文件被更改,包括 500 次插入190 次删除
  1. 500 190
      zhsq_qk-ui/src/views/fusion/fwyq.vue

+ 500 - 190
zhsq_qk-ui/src/views/fusion/fwyq.vue

@@ -562,6 +562,33 @@ export default {
             z: 2,
             data: baifenbi,
           },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: baifenbi.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
           //数据条--------------------我是分割线君------------------------------//
           {
             show: true,
@@ -707,6 +734,33 @@ export default {
             z: 2,
             data: baifenbi,
           },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: baifenbi.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
           //数据条--------------------我是分割线君------------------------------//
           {
             show: true,
@@ -852,6 +906,33 @@ export default {
             z: 2,
             data: baifenbi,
           },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: baifenbi.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
           //数据条--------------------我是分割线君------------------------------//
           {
             show: true,
@@ -1017,6 +1098,33 @@ export default {
             z: 2,
             data: baifenbi,
           },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: baifenbi.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
           //数据条--------------------我是分割线君------------------------------//
           {
             show: true,
@@ -1161,6 +1269,33 @@ export default {
             z: 2,
             data: baifenbi,
           },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: baifenbi.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
           //数据条--------------------我是分割线君------------------------------//
           {
             show: true,
@@ -1305,6 +1440,33 @@ export default {
             z: 2,
             data: baifenbi,
           },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: baifenbi.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
           //数据条--------------------我是分割线君------------------------------//
           {
             show: true,
@@ -1359,6 +1521,37 @@ export default {
     },
     qkq_zxt() {
       var myChart = echarts.init(document.getElementById('qkq_zxt'));
+      var data1 = [220, 182, 191, 234, 290, 330, 310];
+      var data2 = [212, 12, 11, 84, 129, 30, 110];
+      var json = {
+        chart0: {
+          xcategory: ['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
+          low: data1,
+          lowLine: [],
+        }
+      };
+      var json2 = {
+        chart0: {
+          xcategory: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          low: data2,
+          lowLine: [],
+        }
+      };
+      var zrUtil = echarts.util;
+      zrUtil.each(json.chart0.xcategory, function (item, index) {
+        json.chart0.lowLine.push([{
+          coord: [index, json.chart0.low[index]]
+        }, {
+          coord: [index + 1, json.chart0.low[index + 1]]
+        }]);
+      });
+      zrUtil.each(json.chart0.xcategory, function (item, index) {
+        json2.chart0.lowLine.push([{
+          coord: [index, json2.chart0.low[index]]
+        }, {
+          coord: [index + 1, json2.chart0.low[index + 1]]
+        }]);
+      });
       var option = {
         title: {
           text: '',
@@ -1445,54 +1638,103 @@ export default {
             show: false
           }
         },
-        series: [{
-          name: '招商计划',
-          type: 'line',
-          symbol: 'circle',
-          symbolSize: 8,
-          itemStyle: {
-            color: '#0c96ff',
-            borderColor: 'rgb(12,150,255,0.3)',
-            borderWidth: 4,
-          },
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0.3,
-              color: 'rgba(58,132,255,0)'
-            }, {
-              offset: 1,
-              color: 'rgba(58,132,255,0.35)'
-            }]),
-          },
-          emphasis: {
+        series: [
+          {
+            name: '招商计划',
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 8,
             itemStyle: {
               color: '#0c96ff',
               borderColor: 'rgb(12,150,255,0.3)',
               borderWidth: 4,
-            }
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0.3,
+                color: 'rgba(58,132,255,0)'
+              }, {
+                offset: 1,
+                color: 'rgba(58,132,255,0.35)'
+              }]),
+            },
+            emphasis: {
+              itemStyle: {
+                color: '#0c96ff',
+                borderColor: 'rgb(12,150,255,0.3)',
+                borderWidth: 4,
+              }
+            },
+            data: data1,
           },
-          data: [220, 182, 191, 234, 290, 330, 310],
-        }, {
-          name: '实施计划',
-          type: 'line',
-          symbol: 'circle',
-          symbolSize: 8,
-          itemStyle: {
-            color: '#00ffff',
-            borderColor: 'rgb(0,255,255,0.3)',
-            borderWidth: 4,
-          },
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0.3,
-              color: 'rgba(58,132,255,0)'
-            }, {
-              offset: 1,
-              color: 'rgba(58,132,255,0.35)'
-            }]),
-          },
-          data: [212, 12, 11, 84, 129, 30, 110]
-        }]
+          {
+            name: '招商计划',
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            zlevel: 1,
+            smooth: true,
+            symbol: 'circle',
+            effect: {
+              show: true,
+              smooth: true,
+              period: 2,
+              symbolSize: 8
+            },
+            lineStyle: {
+              normal: {
+                color: '#0c96ff',
+                width: 0,
+                opacity: 0,
+                curveness: 0,
+              }
+            },
+            data: json.chart0.lowLine,
+          },
+          {
+            name: '实施计划',
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 8,
+            itemStyle: {
+              color: '#00ffff',
+              borderColor: 'rgb(0,255,255,0.3)',
+              borderWidth: 4,
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0.3,
+                color: 'rgba(58,132,255,0)'
+              }, {
+                offset: 1,
+                color: 'rgba(58,132,255,0.35)'
+              }]),
+            },
+            data: data2
+          },
+          {
+            name: '实施计划',
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            zlevel: 1,
+            smooth: true,
+            symbol: 'circle',
+            effect: {
+              show: true,
+              smooth: true,
+              period: 2,
+              symbolSize: 8
+            },
+            lineStyle: {
+              normal: {
+                color: '#00ffff',
+                width: 0,
+                opacity: 0,
+                curveness: 0,
+              }
+            },
+            data: json2.chart0.lowLine
+          }
+        ]
       };
       if (option) {
         myChart.setOption(option);
@@ -1500,6 +1742,8 @@ export default {
     },
     qkq_zszb1() {
       var myChart = echarts.init(document.getElementById('qkq_zszb1'));
+      let angle = 0; //角度,用来做简单的动画效果的
+      var timerId;
       const dataArr = [
         {
           value: 50,
@@ -1774,171 +2018,210 @@ export default {
             },
             data: legend
           },
-          grid: [{
-            show: false,
-            left: '5%',
-            top: '10%',
-            bottom: '8%',
-            containLabel: true,
-            width: '37%'
-          }, {
-            show: false,
-            left: '53%',
-            top: '10%',
-            bottom: '8%',
-            width: '0%'
-          }, {
-            show: false,
-            right: '2%',
-            top: '10%',
-            bottom: '8%',
-            containLabel: true,
-            width: '37%'
-          }],
-          xAxis: [{
-            type: 'value',
-            inverse: true,
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            position: 'top',
-            axisLabel: {
-              show: true,
-              color: textColor
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: lineColor
-              }
-            },
-          }, {
-            gridIndex: 1,
-            show: false
-          }, {
-            gridIndex: 2,
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            position: 'top',
-            axisLabel: {
-              show: true,
-              color: textColor
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: lineColor
-              }
-            },
-          }],
-          yAxis: [{
-            type: 'category',
-            inverse: true,
-            position: 'right',
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: lineColor
-              }
-            },
-
-            axisTick: {
-              show: false
+          grid: [
+            {
+              show: false,
+              left: '5%',
+              top: '10%',
+              bottom: '8%',
+              containLabel: true,
+              width: '37%'
             },
-            axisLabel: {
-              show: false
+            {
+              show: false,
+              left: '53%',
+              top: '10%',
+              bottom: '8%',
+              width: '0%'
             },
-            data: xData
-          }, {
-            gridIndex: 1,
-            type: 'category',
-            inverse: true,
-            position: 'left',
-            axisLine: {
-              show: false
+            {
+              show: false,
+              right: '2%',
+              top: '10%',
+              bottom: '8%',
+              containLabel: true,
+              width: '37%'
+            }
+          ],
+          xAxis: [
+            {
+              type: 'value',
+              inverse: true,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              position: 'top',
+              axisLabel: {
+                show: true,
+                color: textColor
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: lineColor
+                }
+              },
             },
-            axisTick: {
+            {
+              gridIndex: 1,
               show: false
             },
-            axisLabel: {
-              show: true,
-              padding: [30, 0, 0, 0],
-              textStyle: {
-                color: '#ffffff',
-                fontSize: 14
+            {
+              gridIndex: 2,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              position: 'top',
+              axisLabel: {
+                show: true,
+                color: textColor
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: lineColor
+                }
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'category',
+              inverse: true,
+              position: 'right',
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: lineColor
+                }
               },
-              align: "center"
 
-            },
-            data: xData.map(function (value) {
-              return {
-                value: value,
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              data: xData
+            },
+            {
+              gridIndex: 1,
+              type: 'category',
+              inverse: true,
+              position: 'left',
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                padding: [30, 0, 0, 0],
                 textStyle: {
-                  align: 'center'
+                  color: '#ffffff',
+                  fontSize: 14
+                },
+                align: "center"
+
+              },
+              data: xData.map(function (value) {
+                return {
+                  value: value,
+                  textStyle: {
+                    align: 'center'
+                  }
                 }
-              }
-            })
-          }, {
-            gridIndex: 2,
-            type: 'category',
-            inverse: true,
-            position: 'left',
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: lineColor
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
+              })
+            },
+            {
+              gridIndex: 2,
+              type: 'category',
+              inverse: true,
+              position: 'left',
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: lineColor
+                }
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
 
-            },
-            data: xData
-          }],
+              },
+              data: xData
+            }
+          ],
           series: []
 
         },
         options: []
       }
-
       option.baseOption.timeline.data.push(timeLineData[0])
       option.options.push({
-        series: [{
-          name: "工业类",
-          type: "bar",
-          barWidth: 15,
-          stack: "1",
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                offset: 0,
-                color: colors[0].start
-              },
-                {
-                  offset: 1,
-                  color: colors[0].end
-                }
-              ]),
-            }
-          },
-          label: {
-            normal: {
-              show: true,
-            }
+        series: [
+          {
+            name: "工业类",
+            type: "bar",
+            barWidth: 15,
+            stack: "1",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: colors[0].start
+                },
+                  {
+                    offset: 1,
+                    color: colors[0].end
+                  }
+                ]),
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+              }
+            },
+            data: lastYearData,
+            animationEasing: "elasticOut"
           },
-          data: lastYearData,
-          animationEasing: "elasticOut"
-        },
+          // {
+          //   type: 'lines',
+          //   coordinateSystem: 'cartesian2d',
+          //   data: lastYearData.map((item, index) => {
+          //     return {
+          //       coords: [
+          //         [0, index],
+          //         [item, index],
+          //       ]
+          //     };
+          //   }),
+          //   effect: {
+          //     show: true,
+          //     period: 2.5,
+          //     trailLength: 0.5, //控制拖尾长度
+          //     symbolSize: [15, 2],
+          //     symbol: this.$store.state.common.echarts_baseStreamer,
+          //     loop: true,
+          //     color: '#fff' //流光颜色
+          //   },
+          //   lineStyle: {
+          //     width: 0,
+          //     opacity: 0.6,
+          //     curveness: 0
+          //   },
+          //   z: 99
+          // },
           {
             name: "工业类",
             type: "bar",
@@ -1980,6 +2263,33 @@ export default {
             data: thisYearData,
             animationEasing: "elasticOut"
           },
+          // {
+          //   type: 'lines',
+          //   coordinateSystem: 'cartesian2d',
+          //   data: thisYearData.map((item, index) => {
+          //     return {
+          //       coords: [
+          //         [0, index],
+          //         [item, index],
+          //       ]
+          //     };
+          //   }),
+          //   effect: {
+          //     show: true,
+          //     period: 2.5,
+          //     trailLength: 0.5, //控制拖尾长度
+          //     symbolSize: [15, 2],
+          //     symbol: this.$store.state.common.echarts_baseStreamer,
+          //     loop: true,
+          //     color: '#fff' //流光颜色
+          //   },
+          //   lineStyle: {
+          //     width: 0,
+          //     opacity: 0.6,
+          //     curveness: 0
+          //   },
+          //   z: 99
+          // },
           {
             name: "商业类",
             type: "bar",