记录使用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],['-01-31', 118],['-02-01', 109],['-02-02', 53],['-02-03', 50],['-02-04', 59],['-02-06', 56],['-02-07', 68],['-02-08', 52],['-02-09', 68],['-02-10', 130],['-02-11', 95],['-02-12', 103],['-02-13', 124],['-02-14', 95],['-02-15', 92],['-02-16', 95],['-02-17', 135],['-02-18', 242],['-02-19', 451],['-02-20', 140],['-02-21', 109],['-02-23', 88],['-02-24', 164],['-02-25', 145],['-02-26', 46],['-02-27', 85],['-02-28', 125],['-02-29', 54],['-03-01', 83],['-03-02', 73],['-03-03', 60],['-03-04', 85],['-03-05', 73],['-03-06', 51],['-03-07', 56],['-03-08', 108],['-03-09', 179],['-03-10', 446],['-03-11', 84],['-03-13', 104],['-03-14', 87],['-03-15', 143],['-03-16', 206],['-03-17', 77],['-03-19', 114],['-03-20', 87],['-03-21', 92],['-03-22', 165],['-03-23', 104],['-03-24', 33],['-03-25', 88],['-03-26', 137],['-03-27', 151],['-03-28', 338],['-03-29', 239],['-03-30', 139],['-03-31', 79],['-04-01', 123],['-04-02', 64],['-04-03', 51],['-04-05', 133],['-04-06', 93],['-04-07', 39],['-04-08', 111],['-04-09', 145],['-04-10', 193],['-04-11', 131],['-04-12', 131],['-04-13', 108],['-04-14', 95],['-04-15', 141],['-04-16', 186],['-04-17', 156],['-04-18', 260],['-04-19', 138],['-04-20', 133],['-04-21', 107],['-04-22', 143],['-04-23', 61],['-04-24', 109],['-04-25', 151],['-04-26', 63],['-04-27', 63],['-04-28', 79],['-04-29', 138],['-04-30', 47],['-05-01', 67],['-05-02', 84],['-05-03', 95],['-05-04', 73],['-05-05', 89],['-05-06', 91],['-05-07', 152],['-05-08', 189],['-05-09', 92],['-05-10', 97],['-05-11', 107],['-05-12', 81],['-05-13', 89],['-05-14', 93],['-05-15', 92],['-05-16', 50],['-05-17', 61],['-05-18', 66],['-05-19', 77],['-05-21', 56],['-05-22', 65],['-05-23', 86],['-05-24', 134],['-05-25', 141],['-05-26', 30],['-05-27', 83],['-05-28', 111],['-05-29', 56],['-05-30', 66],['-05-31', 56],['-06-01', 100],['-06-02', 109],['-06-03', 118],['-06-04', 107],['-06-05', 74],['-06-06', 58],['-06-07', 88],['-06-08', 100],['-06-09', 109],['-06-10', 125],['-06-11', 114],['-06-12', 110],['-06-13', 118],['-06-14', 135],['-06-15', 147],['-06-16', 99],['-06-17', 29],['-06-18', 75],['-06-19', 73],['-06-20', 97],['-06-21', 102],['-06-22', 93],['-06-23', 78],['-06-24', 58],['-06-25', 61],['-06-26', 100],['-06-27', 106],['-06-28', 139],['-06-29', 152],['-06-30', 49],['-07-01', 46],['-07-02', 85],['-07-03', 97],['-07-04', 58],['-07-05', 56],['-07-06', 59],['-07-07', 74],['-07-08', 63],['-07-09', 59],['-07-10', 91],['-07-11', 70],['-07-12', 53],['-07-13', 55],['-07-14', 67],['-07-15', 97],['-07-16', 123],['-07-17', 118],['-07-18', 100],['-07-19', 80],['-07-20', 135],['-07-21', 67],['-07-22', 70],['-07-23', 105],['-07-24', 55],['-07-25', 78],['-07-26', 78],['-07-27', 59],['-07-28', 111],['-07-29', 78],['-07-30', 30],['-07-31', 78],['-08-01', 91],['-08-02', 119],['-08-03', 95],['-08-04', 73],['-08-05', 76],['-08-06', 89],['-08-07', 117],['-08-08', 145],['-08-09', 143],['-08-10', 84],['-08-11', 84],['-08-12', 51],['-08-13', 31],['-08-14', 83],['-08-15', 76],['-08-16', 51],['-08-17', 67],['-08-18', 75],['-08-19', 68],['-08-20', 80],['-08-21', 99],['-08-22', 70],['-08-23', 60],['-08-24', 105],['-08-25', 122],['-08-26', 100],['-08-27', 125],['-08-28', 70],['-08-29', 57],['-08-30', 79],['-08-31', 68],['-09-01', 61],['-09-02', 67],['-09-03', 77],['-09-04', 64],['-09-05', 96],['-09-06', 101],['-09-07', 24],['-09-08', 61],['-09-09', 80],['-09-10', 85],['-09-11', 88],['-09-12', 95],['-09-13', 101],['-09-14', 140],['-09-15', 34],['-09-16', 81],['-09-17', 89],['-09-18', 86],['-09-19', 71],['-09-20', 94],['-09-21', 40],['-09-22', 84],['-09-23', 122],['-09-24', 197],['-09-25', 179],['-09-26', 111]]export default {data () {return {chartData: {title: {text: '二氧化碳压力',subtext: '单位:mmHg时间: [/07/28-/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-echarts实现类似心电图》对你有帮助，请点赞、收藏，并留下你的观点哦！