Newer
Older
smartKitchenFront / src / views / example / chartExample.vue
Stephanie on 4 Nov 2022 955 bytes feat<*>: 引入echarts
<template>
  <div>
    <el-row>
      <el-col :span="8" style="height: 400px">
        <gradient-line-chart :x-axis-data="xAxisData" :series-data="seriesData" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GradientLineChart from '@/components/echart/lineChart/gradientLineChart'
export default {
  name: 'ChartExample',
  components: { GradientLineChart },
  data() {
    return {
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      seriesData: [
        { name: '井盖状态监测仪', data: [120, 252, 101, 134, 290, 230, 110], color: '58,55,194' },
        { name: '液位监测仪', data: [120, 222, 191, 234, 250, 200, 310], color: '109,202,23' },
        { name: '有害气体', data: [120, 252, 101, 134, 290, 230, 110], color: '0,255,204' },
        { name: '消防栓', data: [0, 0, 1, 0, 0, 0, 0], color: '255,192,203' }
      ]
    }
  }
}
</script>

<style scoped>

</style>