从1.0迁移过来

src/components/echartsList/line.vue

@@ -0,0 +1,148 @@
+<template>
+    <div>
+        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
+        <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
+    </div>
+</template>
+
+<script>
+    import * as echarts from 'echarts'
+    import DateTimeSelect from './dateTimeSelect.vue'
+    export default {
+      name: 'echartsLine',
+      components: {DateTimeSelect},
+      props: {
+        lineData: {
+          type: Object,
+          default: () => {}
+        },
+        title: {
+          type: String,
+          default: null
+        },
+        dateShowType: {
+          type: String,
+          default: null
+        },
+        chartData: {
+          type: Function,
+          default: () => {
+          }
+        },
+        sideIcon: {
+          type: Object,
+          default: () => {}
+        }
+      },
+      watch: {
+        lineData: {
+          handler(val) {
+            this.$nextTick(() => {
+              this.getList(this.title, this.lineData);
+            });
+          },
+          deep: true,
+          immediate: true
+        }
+      },
+      data() {
+        return {
+          lineDataList: '',
+          num: ''
+        }
+      },
+      created() {
+        this.num = Math.floor(Math.random() * 9000);
+      },
+      mounted() {
+        if (this.lineData && this.lineData.hiddenTime) {
+          this.getList(this.title, this.lineData);
+        }
+      },
+      methods: {
+        getList(title, dataXY) {
+          const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
+          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center',textStyle: {fontSize: 16}};
+          if (dataXY && dataXY.titleVal) {
+            titleList = Object.assign({},titleList, dataXY.titleVal);
+          }
+          let series = [];
+          if (dataXY && dataXY.dataList) {
+            dataXY.dataList.forEach(item => {
+              series.push({
+                name: item.name,
+                type: 'line',
+                stack: 'Total',
+                data: item.data
+              });
+            });
+          } else {
+            series = [{
+              data: dataXY.data,
+              type: 'line',
+              smooth: true,
+              // areaStyle: {  // 阴影
+              //   color: 'rgba(140, 158, 217, 1)'
+              // }
+            }];
+          }
+          let option = {
+            title: [titleList],
+            legend: dataXY && dataXY.legend ? dataXY.legend : {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross',
+                label: {
+                  backgroundColor: '#6a7985'
+                }
+              }
+            },
+            grid: {
+              top: dataXY && dataXY.gridTop || '80px',
+              left: '2%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              data: dataXY.lineXData
+            },
+            yAxis: {
+              type: 'value',
+              name: '单位Mbps',
+              splitLine: {
+                show: true,
+              },
+            },
+            series: series
+          };
+          lineDataListIntance.setOption(option);
+          // window.addEventListener("resize", () => {
+          //   lineDataListIntance.resize()
+          // })
+        },
+        dataChangeValue(val, timeArr, iconVal) {
+          // 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
+          if (timeArr) {
+            this.chartData(timeArr);
+          }
+          if (iconVal) {
+            this.chartData({iconVal: iconVal})
+          }
+          // let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
+          // this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
+        }
+      }
+    }
+</script>
+<style scoped>
+</style>