上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/home/single-data/single-data-chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,140 @@
<template>
    <div>
      <div id='singleDataChart' style='height:200px'></div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      xAxisList: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
      powerList: [620, 952, 981, 634, 190, 1830, 620, 952, 981, 634, 190, 190, 1830],
      lightList: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330]
    }
  },
  activated () {
    this.init()
    this.drawChart()
  },
  methods: {
    init () {
      var h = window.innerHeight || document.body.clientHeight
      var body = document.getElementById('singleDataChart')
      var num = (h / 3) - 100
      body.style.height = num + 'px'
    },
    drawChart () {
      var option = {
        legend: {
          orient: 'horizontal',
          position: 'center',
          top: 10,
          data: ['电源亮度', '电源有功功率'],
          textStyle: {
            color: 'white'
          }
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          type: 'category',
          boundaryGap: false,
          data: this.xAxisList
        },
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          type: 'value',
          axisLabel: {
            formatter: function (param) {
              return param / 10
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '电源有功功率',
            data: this.powerList,
            type: 'line',
            symbol: 'circle', // æŠ˜çº¿ç‚¹è®¾ç½®ä¸ºå®žå¿ƒç‚¹
            symbolSize: 10, // è®¾å®šå®žå¿ƒç‚¹çš„大小
            lineStyle: {
              width: 5
            },
            itemStyle: {
              normal: {
                color: '#68A2D1', // æŠ˜çº¿ç‚¹çš„颜色
                lineStyle: {
                  color: '#68A2D1' // æŠ˜çº¿çš„颜色
                }
              }
            },
            areaStyle: {
              normal: {
                // é¢œè‰²æ¸å˜å‡½æ•° å‰å››ä¸ªå‚数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(0,0,0,0.2)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(25,64,121,.7)'
                  },
                  {
                    offset: 1,
                    color: '#1B3C72'
                  }
                ])
              }
            }
          },
          {
            name: '电源亮度',
            data: this.lightList,
            symbol: 'circle', // æŠ˜çº¿ç‚¹è®¾ç½®ä¸ºå®žå¿ƒç‚¹
            symbolSize: 10, // è®¾å®šå®žå¿ƒç‚¹çš„大小
            type: 'line',
            lineStyle: {
              width: 5
            },
            itemStyle: {
              normal: {
                color: '#F81136', // æŠ˜çº¿ç‚¹çš„颜色
                lineStyle: {
                  color: '#F81136' // æŠ˜çº¿çš„颜色
                }
              }
            }
          }
        ]
      }

      var singleDataChart = echarts.init(
        document.getElementById('singleDataChart')
      )
      singleDataChart.setOption(option)
    }
  }
}
</script>
<style>
</style>