控件提交

src/components/chart/line/double-line-chartold.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="chart"
+       :id="id"></div>
+</template>
+
+<script>
+import util from '@/helper/util.js'
+import partten from '@/helper/partten.js'
+import * as echarts from 'echarts'
+
+export default {
+  name: 'double-line-chart',
+  componentName: 'double-line-chart',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '13.889vh'
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: '绿线',
+          smooth: true,
+          value: [
+            {
+              text: '',
+              value: 0
+            },
+            {
+              text: '0:00',
+              value: 20
+            },
+            {
+              text: '10:00',
+              value: 1
+            },
+            {
+              text: '11:00',
+              value: 40
+            },
+            {
+              text: '12:00',
+              value: 10
+            },
+            {
+              text: '13:00',
+              value: 15
+            },
+            {
+              text: '14:00',
+              value: 30
+            },
+            {
+              text: '15:00',
+              value: 40
+            },
+            {
+              text: '',
+              value: 10
+            }
+          ]
+        },
+        {
+          title: '黄线',
+          smooth: true,
+          value: [
+            {
+              text: '',
+              value: 0
+            },
+            {
+              text: '0:00',
+              value: 40
+            },
+            {
+              text: '10:00',
+              value: 20
+            },
+            {
+              text: '11:00',
+              value: 20
+            },
+            {
+              text: '12:00',
+              value: 10
+            },
+            {
+              text: '13:00',
+              value: 40
+            },
+            {
+              text: '14:00',
+              value: 50
+            },
+            {
+              text: '15:00',
+              value: 40
+            },
+            {
+              text: '',
+              value: 10
+            }
+          ]
+        }
+      ]
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: ''
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      id: '',
+      chart: null,
+      color: ['#05bb4c', '#f8de5b', '#4b55ae', '#fa8c16']
+    }
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color)
+    },
+    datas() {
+      return this.list.map(t => {
+        return t.value
+      })
+    },
+    legend() {
+      if (this.newlist) {
+        return this.newlist.map(t => {
+          return t.title
+        })
+      } else {
+        return ''
+      }
+    },
+    xdata() {
+      if (this.list) {
+        return this.list[0].value.map(t => {
+          return t.text
+        })
+      } else {
+        return ''
+      }
+    },
+    series() {
+      let result = []
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: 'line',
+          smooth: value.smooth,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1
+            }
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map(t => {
+            return t.value
+          })
+        })
+      })
+
+      return result
+    },
+    yAxis() {
+      let result = []
+      result.push({
+        type: 'value',
+        name: this.unit,
+        axisLabel: {
+          formatter: '{value}',
+          fontSize: util.vh(14)
+        },
+        boundaryGap: false,
+        //分格线
+        splitLine: {
+          show: false
+        }
+      })
+      return result
+    }
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el)
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.4)',
+          borderColor: partten.getColor('gray'),
+          textStyle: {
+            color: '#fff',
+            fontSize: util.vh(16)
+          }
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: 'circle',
+          itemWidth: 6,
+          inactiveColor: partten.getColor('gray'),
+          textStyle: {
+            color: partten.getColor('grayl'),
+            fontSize: 12
+          }
+        },
+        grid: {
+          top: 16,
+          left: 32,
+          right: 8,
+          bottom: 24
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {
+              formatter: '{value}',
+              textStyle: {
+                color: partten.getColor('gray'),
+                fontSize: util.vh(14)
+              }
+            },
+            data: this.xdata
+          }
+        ],
+        yAxis: this.yAxis,
+        series: this.series
+      }
+
+      chart.clear()
+      chart.setOption(option)
+
+      this.resize = function() {
+        chart.resize()
+      }
+
+      window.addEventListener('resize', this.resize)
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = 'pie-chart-' + util.newGUID()
+    })
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width
+      this.$el.style.height = this.height
+      this.initChart()
+    })
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.resize)
+  }
+}
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>