记录使用vue-echarts实现类似心电图

1、使用的"vue-echarts": "^3.1.0"是这个版本2、最终效果(忽视数据,还没对接真实数据)3、具体代码<template><div class="echart"><chart :options="chartData" auto-resize ref="chart" :style="{width: '600px', height: '300px'}"&

水痕01

3790人浏览 · 2020-09-27 16:36:38

水痕01 · 2020-09-27 16:36:38 发布

1、使用的"vue-echarts": "^3.1.0"是这个版本
2、最终效果(忽视数据,还没对接真实数据)

3、具体代码

<template>
  <div class="echart">
    <chart :options="chartData" auto-resize ref="chart" :style="{width: '600px', height: '300px'}"></chart>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'

const chartDataList = [
  ['2000-06-05', 116],
  ['2000-06-06', 129],
  ['2000-06-07', 135],
  ['2004-01-31', 118],
  ['2004-02-01', 109],
  ['2004-02-02', 53],
  ['2004-02-03', 50],
  ['2004-02-04', 59],
  ['2004-02-06', 56],
  ['2004-02-07', 68],
  ['2004-02-08', 52],
  ['2004-02-09', 68],
  ['2004-02-10', 130],
  ['2004-02-11', 95],
  ['2004-02-12', 103],
  ['2004-02-13', 124],
  ['2004-02-14', 95],
  ['2004-02-15', 92],
  ['2004-02-16', 95],
  ['2004-02-17', 135],
  ['2004-02-18', 242],
  ['2004-02-19', 451],
  ['2004-02-20', 140],
  ['2004-02-21', 109],
  ['2004-02-23', 88],
  ['2004-02-24', 164],
  ['2004-02-25', 145],
  ['2004-02-26', 46],
  ['2004-02-27', 85],
  ['2004-02-28', 125],
  ['2004-02-29', 54],
  ['2004-03-01', 83],
  ['2004-03-02', 73],
  ['2004-03-03', 60],
  ['2004-03-04', 85],
  ['2004-03-05', 73],
  ['2004-03-06', 51],
  ['2004-03-07', 56],
  ['2004-03-08', 108],
  ['2004-03-09', 179],
  ['2004-03-10', 446],
  ['2004-03-11', 84],
  ['2004-03-13', 104],
  ['2004-03-14', 87],
  ['2004-03-15', 143],
  ['2004-03-16', 206],
  ['2004-03-17', 77],
  ['2004-03-19', 114],
  ['2004-03-20', 87],
  ['2004-03-21', 92],
  ['2004-03-22', 165],
  ['2004-03-23', 104],
  ['2004-03-24', 33],
  ['2004-03-25', 88],
  ['2004-03-26', 137],
  ['2004-03-27', 151],
  ['2004-03-28', 338],
  ['2004-03-29', 239],
  ['2004-03-30', 139],
  ['2004-03-31', 79],
  ['2004-04-01', 123],
  ['2004-04-02', 64],
  ['2004-04-03', 51],
  ['2004-04-05', 133],
  ['2004-04-06', 93],
  ['2004-04-07', 39],
  ['2004-04-08', 111],
  ['2004-04-09', 145],
  ['2004-04-10', 193],
  ['2004-04-11', 131],
  ['2004-04-12', 131],
  ['2004-04-13', 108],
  ['2004-04-14', 95],
  ['2004-04-15', 141],
  ['2004-04-16', 186],
  ['2004-04-17', 156],
  ['2004-04-18', 260],
  ['2004-04-19', 138],
  ['2004-04-20', 133],
  ['2004-04-21', 107],
  ['2004-04-22', 143],
  ['2004-04-23', 61],
  ['2004-04-24', 109],
  ['2004-04-25', 151],
  ['2004-04-26', 63],
  ['2004-04-27', 63],
  ['2004-04-28', 79],
  ['2004-04-29', 138],
  ['2004-04-30', 47],
  ['2004-05-01', 67],
  ['2004-05-02', 84],
  ['2004-05-03', 95],
  ['2004-05-04', 73],
  ['2004-05-05', 89],
  ['2004-05-06', 91],
  ['2004-05-07', 152],
  ['2004-05-08', 189],
  ['2004-05-09', 92],
  ['2004-05-10', 97],
  ['2004-05-11', 107],
  ['2004-05-12', 81],
  ['2004-05-13', 89],
  ['2004-05-14', 93],
  ['2004-05-15', 92],
  ['2004-05-16', 50],
  ['2004-05-17', 61],
  ['2004-05-18', 66],
  ['2004-05-19', 77],
  ['2004-05-21', 56],
  ['2004-05-22', 65],
  ['2004-05-23', 86],
  ['2004-05-24', 134],
  ['2004-05-25', 141],
  ['2004-05-26', 30],
  ['2004-05-27', 83],
  ['2004-05-28', 111],
  ['2004-05-29', 56],
  ['2004-05-30', 66],
  ['2004-05-31', 56],
  ['2004-06-01', 100],
  ['2004-06-02', 109],
  ['2004-06-03', 118],
  ['2004-06-04', 107],
  ['2004-06-05', 74],
  ['2004-06-06', 58],
  ['2004-06-07', 88],
  ['2004-06-08', 100],
  ['2004-06-09', 109],
  ['2004-06-10', 125],
  ['2004-06-11', 114],
  ['2004-06-12', 110],
  ['2004-06-13', 118],
  ['2004-06-14', 135],
  ['2004-06-15', 147],
  ['2004-06-16', 99],
  ['2004-06-17', 29],
  ['2004-06-18', 75],
  ['2004-06-19', 73],
  ['2004-06-20', 97],
  ['2004-06-21', 102],
  ['2004-06-22', 93],
  ['2004-06-23', 78],
  ['2004-06-24', 58],
  ['2004-06-25', 61],
  ['2004-06-26', 100],
  ['2004-06-27', 106],
  ['2004-06-28', 139],
  ['2004-06-29', 152],
  ['2004-06-30', 49],
  ['2004-07-01', 46],
  ['2004-07-02', 85],
  ['2004-07-03', 97],
  ['2004-07-04', 58],
  ['2004-07-05', 56],
  ['2004-07-06', 59],
  ['2004-07-07', 74],
  ['2004-07-08', 63],
  ['2004-07-09', 59],
  ['2004-07-10', 91],
  ['2004-07-11', 70],
  ['2004-07-12', 53],
  ['2004-07-13', 55],
  ['2004-07-14', 67],
  ['2004-07-15', 97],
  ['2004-07-16', 123],
  ['2004-07-17', 118],
  ['2004-07-18', 100],
  ['2004-07-19', 80],
  ['2004-07-20', 135],
  ['2004-07-21', 67],
  ['2004-07-22', 70],
  ['2004-07-23', 105],
  ['2004-07-24', 55],
  ['2004-07-25', 78],
  ['2004-07-26', 78],
  ['2004-07-27', 59],
  ['2004-07-28', 111],
  ['2004-07-29', 78],
  ['2004-07-30', 30],
  ['2004-07-31', 78],
  ['2004-08-01', 91],
  ['2004-08-02', 119],
  ['2004-08-03', 95],
  ['2004-08-04', 73],
  ['2004-08-05', 76],
  ['2004-08-06', 89],
  ['2004-08-07', 117],
  ['2004-08-08', 145],
  ['2004-08-09', 143],
  ['2004-08-10', 84],
  ['2004-08-11', 84],
  ['2004-08-12', 51],
  ['2004-08-13', 31],
  ['2004-08-14', 83],
  ['2004-08-15', 76],
  ['2004-08-16', 51],
  ['2004-08-17', 67],
  ['2004-08-18', 75],
  ['2004-08-19', 68],
  ['2004-08-20', 80],
  ['2004-08-21', 99],
  ['2004-08-22', 70],
  ['2004-08-23', 60],
  ['2004-08-24', 105],
  ['2004-08-25', 122],
  ['2004-08-26', 100],
  ['2004-08-27', 125],
  ['2004-08-28', 70],
  ['2004-08-29', 57],
  ['2004-08-30', 79],
  ['2004-08-31', 68],
  ['2004-09-01', 61],
  ['2004-09-02', 67],
  ['2004-09-03', 77],
  ['2004-09-04', 64],
  ['2004-09-05', 96],
  ['2004-09-06', 101],
  ['2004-09-07', 24],
  ['2004-09-08', 61],
  ['2004-09-09', 80],
  ['2004-09-10', 85],
  ['2004-09-11', 88],
  ['2004-09-12', 95],
  ['2004-09-13', 101],
  ['2004-09-14', 140],
  ['2004-09-15', 34],
  ['2004-09-16', 81],
  ['2004-09-17', 89],
  ['2004-09-18', 86],
  ['2004-09-19', 71],
  ['2004-09-20', 94],
  ['2004-09-21', 40],
  ['2004-09-22', 84],
  ['2004-09-23', 122],
  ['2004-09-24', 197],
  ['2004-09-25', 179],
  ['2004-09-26', 111]
]

export default {
  data () {
    return {
      chartData: {
        title: {
          text: '二氧化碳压力',
          subtext: '单位:mmHg时间: [2019/07/28-2020/07/28]'
        },
        // 显示图例
        legend: {
          icon: 'rect',
          bottom: 0,
          left: 50
        },
        color: ['#C0E5FC'],
        xAxis: {
          data: chartDataList.map((item) => {
            return item[0]
          }),
          show: false,
          axisTick: false,
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          axisTick: { // 纵坐标旁边的符合
            show: false
          },
          min: 10,
          splitLine: {
            show: true
          }
        },
        series: {
          name: '二氧化碳压力',
          type: 'line',
          data: chartDataList.map((item) => {
            return item[1]
          }),
          // 绘制阴影
          markArea: {
            silent: true,
            data: [
              [
                {
                  yAxis: '100'
                },
                {
                  yAxis: '300'
                }
              ]
            ]
          }
        }
      }
    }
  },
  components: {
    chart: ECharts
  }
}
</script>

<style lang="scss" scoped>
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^