<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>