记录使用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'}"></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>