Echarts折线图--心率需求

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
安装echarts<br><br><br><br><br><template>
   <div id="myChart" class="notfound"></div>
</template>
<script>
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});
export default {
  name: 'zheixnatu',
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
   methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
             // Make gradient line here
            backgroundColor: ['#081944'], // 全图默认背景
            grid: [{
                bottom: '60%'
            }, {
                top: '60%'
            }, {
                show: true,
                borderWidth: 1,
                borderColor: '#FF0000' // 网格的边框颜色
            }],
            // 视觉映射组件，用于进行『视觉编码』
            visualMap: [{
                show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
                type: 'continuous', // 定义为连续型 visualMap
                seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
                min: 0, // 指定 visualMapPiecewise 组件的最小值。
                max: 400
            }, {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,
                max: dateList.length - 1
            }],
            title: [{
                left: 'center',
                text: 'Gradient along the y axis'
            }, {
                top: '55%',
                left: 'center',
                text: 'Gradient along the x axis'
            }],
            // 提示框组件
            tooltip: {
                trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
            },
            xAxis: [{
                data: dateList,
                show: false //是否显示x轴
            }, {
                data: dateList,
                gridIndex: 1 // x 轴所在的 grid 的索引，默认位于第一个 grid。
            }],
            yAxis: [{
                nameTextStyle: { // 坐标轴名称的文字样式。
                    color: '#63B8FF',
                    fontWeight:'bold', // 坐标轴名称文字字体的粗细
                    fontSize: 15
                },
                name: '心率次数',
                splitLine: {
                    show: true, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
                    lineStyle:{
                         // 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                        color: ['#FF0000', '#BCEE68']
                    }
                }
            }, {
                splitLine: {show: false},
                gridIndex: 1
            }],
            // 系列列表。每个系列通过 type 决定自己的图表类型
            series: [{
                type: 'line', // 线条
                showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
                data: valueList
            }, {
                type: 'line',
                showSymbol: false,
                data: valueList,
                xAxisIndex: 1,
                yAxisIndex: 1
            }]
        });
    }
  }
}
</script>
<style scoped>
.notfound{
    width: 800px;
    height: 800px;
}
</style>

安装Echarts

直接使用npm进行安装。

1

npm install Echarts --save

npm install –save:
会把webpack包安装到node_modules目录中
会在package.json的dependencies属性下添加webpack
之后运行npm install命令时，会自动安装webpack到node_modules目录中
之后运行npm install –production或者注明NODE_ENV变量值为production时，会自动安装webpack到node_modules目录中

npm install –save-dev:
会把webpack包安装到node_modules目录中
会在package.json的devDependencies属性下添加webpack
之后运行npm install命令时，会自动安装webpack到node_modules目录中
之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中

总结:

devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

 

引入Echarts

1

2

3

//在main.js加入下面两行代码

import echarts from 'echarts'

Vue.prototype.$echarts = echarts //将echarts注册成Vue的全局属性
 

　　

复制代码
<template>
   <div id="myChart" class="notfound"></div> 
</template>
<script>
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});
export default {
  name: 'zheixnatu',
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
   methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
             // Make gradient line here
            backgroundColor: ['#081944'], // 全图默认背景
            grid: [{
                bottom: '60%'
            }, {
                top: '60%'
            }, {
                show: false,
                borderWidth: 1,
                // borderColor: '#FF0000' // 网格的边框颜色
            }],
            // 视觉映射组件，用于进行『视觉编码』
            visualMap: [{
                show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
                type: 'continuous', // 定义为连续型 visualMap
                seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
                min: 0, // 指定 visualMapPiecewise 组件的最小值。
                max: 400
            }, {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,
                max: dateList.length - 1
            }],
            title: [{
                left: 'center',
                text: 'Gradient along the y axis'
            }, {
                top: '55%',
                left: 'center',
                text: 'Gradient along the x axis'
            }],
            // 提示框组件
            tooltip: {
                trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
            },
            xAxis: [{
                data: dateList,
                show: true //是否显示x轴
            }, {
                data: dateList,
                gridIndex: 1 // x 轴所在的 grid 的索引，默认位于第一个 grid。
            }],
            yAxis: [{
                nameTextStyle: { // 坐标轴名称的文字样式。
                    color: '#63B8FF',
                    fontWeight:'bold', // 坐标轴名称文字字体的粗细
                    fontSize: 15
                },
                name: '心率次数/bmp',
                splitLine: {
                    show: true, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
                    lineStyle:{
                         // 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                        color: ['#4F5258', '#30394F']
                    }
                }
            }, {
                splitLine: {show: false},
                gridIndex: 1
            }],
            // 系列列表。每个系列通过 type 决定自己的图表类型
            series: [{
                type: 'line', // 线条
                showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
                data: valueList,
                lineStyle: {color: '#BA3945'}, // 线条样式
                markPoint: { // 图表标注
                    data: [
                        {
                            type: 'max', 
                            name: '最高心率',
                            label: {
                                color: '#CCCCCC',
                                show: true,
                            }
                        },
                        {
                            type: 'min',
                            name: '最小心率',
                            label: {
                                color: '#CCCCCC',
                                show: true,
                                position: 'bottom',
                            },
                            symbolSize: [5, 5] // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                        }
                    ],
                    // symbol: 'none', // 标记的图形。circle-圆形,rect-方形
                    label: { // 标注的文本
                        show: true
                    },
                    itemStyle: {
                        color: '#081944', // 图形的颜色--设置这个是为了隐藏掉图标
                        opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    }
                }
            }, {
                type: 'line',
                showSymbol: false,
                data: valueList,
                xAxisIndex: 1,
                yAxisIndex: 1
            }]
        });
    }
  }
}
</script>
<style scoped>
.notfound{
    width: 800px;
    height: 800px;
}
</style>
复制代码

posted @   小白咚  阅读(3830)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛