一、自定义矩形
效果：
echarts代码：
option = {
title: {
text: "睡眠情况(分)",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
data: [
"2023-2-12",
"2023-2-13",
"2023-2-14",
"2023-2-15",
"2023-2-16",
"2023-2-17",
"2023-2-18",
],
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
axisLine: {
onZero: true,
lineStyle: {
type: "solid",
color: "#8298AF", // 左边线的颜色
width: "1", // 坐标线的宽度
},
},
axisTick: {
show: false, // 去除轴下面的刻度
},
},
yAxis: {
axisLabel: {
textStyle: {
fontSize: 16,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
},
series: [
{
type: 'custom',
renderItem:function (params, api) {
// 颜色程度对照表
const bgColorMap = [
[(score) => score >= 80 && score <= 100, () => "#01c800"],
[(score) => score >= 60 && score < 80, () => "#9ed113"],
[(score) => score >= 40 && score < 60, () => "#ddce00"],
[(score) => score >= 20 && score < 40, () => "#ff7b00"],
[(score) => score >= 0 && score < 20, () => "#ff0000"],
];
// 获取符合条件的子数组
const item = bgColorMap.find((item) => item[0](api.value(1)));
// 子数组存在则运行子数组中的第二个元素（执行函数）
let bgColor = item[1](api.value(1));
var xValue = api.value(0);
var lowPoint = api.coord([xValue, api.value(1)]); //得到下面线的中心坐标
var halfWidth = api.size([1, 0])[0] * 0.1; //根据x轴索引为1的数值得到所在的映射宽度*0.1
return {
type: "rect",
shape: {
x: lowPoint[0] - halfWidth,
y: lowPoint[1],
width: halfWidth * 2,
height: halfWidth,
},
style: {
fill: bgColor,
stroke: "#000",
lineWidth: 1,
},
};
},
data: [
["2023-2-12",10],
["2023-2-12",30],
["2023-2-13",100],
["2023-2-14",60],
["2023-2-15",70],
["2023-2-16",10],
["2023-2-16",80],
["2023-2-17",80],
["2023-2-18",80]
],
name: "睡眠情况",
itemStyle: {
normal: {
borderWidth: 1.5,
},
},
}
]
};二、自定义线
效果：
代码：
var categoryData = [
"2023-2-12",
"2023-2-13",
"2023-2-14",
"2023-2-15",
"2023-2-16",
"2023-2-17",
"2023-2-18",
];
var msgData = [
[0, 86, 160],
[0, 74, 156],
[1, 90, 155],
[2, 77, 135],
[3, 68, 145],
[4, 80, 137],
[4, 58, 125],
[5, 60, 145],
[6, 70, 135],
[7, 80, 145]
];
function renderItem(params, api) {
var xValue = api.value(0);
var lowPoint = api.coord([xValue, api.value(1)]); //得到下面线的中心坐标
var highPoint = api.coord([xValue, api.value(2)]); //得到上面线的中心坐标
var halfWidth = api.size([1, 0])[0] * 0.1; //根据x轴索引为1的数值得到所在的映射宽度*0.1
var style = api.style({
stroke: api.visual('color'),
fill: null
});
return {
type: 'group', //上面那条线
children: [
{
type: 'line',
shape: {
x1: highPoint[0] - halfWidth,
y1: highPoint[1],
x2: highPoint[0] + halfWidth,
y2: highPoint[1]
},
style: style
},
{
//中间垂直线
type: 'line',
shape: {
x1: highPoint[0],
y1: highPoint[1],
x2: lowPoint[0],
y2: lowPoint[1]
},
style: style
},
{
//下面那条线
type: 'line',
shape: {
x1: lowPoint[0] - halfWidth,
y1: lowPoint[1],
x2: lowPoint[0] + halfWidth,
y2: lowPoint[1]
},
style: style
}
]
};
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: '血压'
},
legend: {
data: ['血压']
},
xAxis: {
data: categoryData
},
yAxis: {},
series: [
{
type: 'custom',
name: '血压',
itemStyle: {
normal: {
borderWidth: 1.5
}
},
renderItem: renderItem,
encode: {
y: [1, 2]
},
data: msgData,
z: 100,
}
]
};三、项目应用
效果：
代码;
<template>
<div>
<div
id="tset"
:style="{width: '1000px', height: '200px'}"
/>
<div
id="test2"
:style="{width: '1000px', height: '200px'}"
/>
<div
id="test4"
:style="{width: '1000px', height: '200px'}"
/>
<div
id="test5"
:style="{width: '1000px', height: '200px'}"
/>
</div>
</template>
<script lang="ts">
import * as echarts from "echarts";
export default {
props: {},
data() {
return {};
},
watch: {},
mounted() {
this.drawLine();
},
methods: {
showChart() {
this.drawLine();
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
// const testChart1 = echarts.init(document.getElementById("tset"));
const testChart1 = echarts.init(document.getElementById("tset"));
// 绘制图表
testChart1.setOption({
// title: {
// text: "血糖(mmol/l)",
// },
color: ["#000"],
tooltip: {
axisPointer: {
type: "shadow",
},
trigger: "axis",
},
axisPointer: {
type: "shadow",
},
xAxis: [
{
type: "category",
boundaryGap: true,
data: [
"2023-2-12",
"2023-2-13",
"2023-2-14",
"2023-2-15",
"2023-2-16",
"2023-2-17",
"2023-2-18",
],
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
axisLine: {
onZero: true,
lineStyle: {
type: "solid",
color: "#8298AF", // 左边线的颜色
width: "1", // 坐标线的宽度
},
},
axisTick: {
show: false, // 去除轴下面的刻度
},
},
],
yAxis: [
{
name: "血糖(mmol/l)",
// nameLocation: "start",
nameTextStyle: {
// padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离
color: "#0b4ea5",
fontSize: 12, // 字体大小
},
type: "value",
// max: 500,
scale: true,
minInterval: 1.5,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
],
series: [
{
name: "血糖",
type: "line",
symbolSize: 8,
symbol: "circle",
hoverAnimation: false,
data: [
["2023-2-12", 12],
["2023-2-12", 14],
["2023-2-12", 13],
["2023-2-13", 17],
["2023-2-15", 14],
["2023-2-16", 19],
["2023-2-16", 13],
["2023-2-17", 1],
],
markLine: {
data: [
{
yAxis: 16,
label: {
padding: [0, 0, 0, -75],
position: "end",
formatter: (e) => {
return "最大阈值：" + e.value;
},
},
},
{
yAxis: 2, //警戒值
label: {
padding: [0, 0, 0, -75], //警戒线标签名距离警戒线的位置
position: "end", //警戒线标签的定位，还有minddle等字段。
formatter: (e) => {
//自定义警戒线标签名
return "最小阈值：" + e.value;
},
},
},
],
silent: false, //鼠标移入警戒线，警戒线会变粗，false不变，true变
symbol: false,
lineStyle: {
//警戒线的样式，颜色，宽度，类型
color: "red",
type: "dashed", //还有实线，
width: 1,
},
},
barMaxWidth: 20,
},
],
visualMap: {
pieces: [
{
gt: 2,
lte: 16,
color: "#000",
},
{
gt: 16,
color: "red",
},
{
lte: 2,
color: "red",
},
],
left: "center", //标签距离左边的距离，还可以用left。center等字段
top: "25", //标签距离顶部距离。还可以用top。middle等字段
orient: "horizontal", //标签排列方式，水平和垂直
show: false, //标签是否显示
},
});
// 基于准备好的dom，初始化echarts实例
const testChart2 = echarts.init(document.getElementById("test2"));
// 绘制图表
testChart2.setOption({
// title: {
// text: "血氧(%)",
// },
color: ["#000"],
tooltip: {
axisPointer: {
type: "shadow",
},
trigger: "axis",
},
xAxis: [
{
type: "category",
boundaryGap: true,
data: [
"2023-2-12",
"2023-2-13",
"2023-2-14",
"2023-2-15",
"2023-2-16",
"2023-2-17",
"2023-2-18",
],
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
axisLine: {
onZero: true,
lineStyle: {
type: "solid",
color: "#8298AF", // 左边线的颜色
width: "1", // 坐标线的宽度
},
},
axisTick: {
show: false, // 去除轴下面的刻度
},
},
],
yAxis: [
{
name: "血氧(%)",
// nameLocation: "start",
nameTextStyle: {
// padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离
color: "#0b4ea5",
fontSize: 12, // 字体大小
},
type: "value",
// max: 500,
scale: true,
minInterval: 1.5,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
],
series: [
{
name: "血氧",
type: "line",
symbolSize: 8,
symbol: "circle",
hoverAnimation: false,
data: [
["2023-2-12", 80],
["2023-2-12", 78],
["2023-2-13", 85],
["2023-2-15", 87],
["2023-2-16", 85],
["2023-2-16", 84],
["2023-2-17", 83],
],
barMaxWidth: 20,
},
],
});
let categoryData = [
"2023-2-12",
"2023-2-13",
"2023-2-14",
"2023-2-15",
"2023-2-16",
"2023-2-17",
"2023-2-18",
];
let msgData = [
[0, 86, 160],
[0, 74, 156],
[1, 90, 250],
[2, 77, 135],
[3, 68, 145],
[4, 80, 137],
[4, 58, 125],
[5, 60, 145],
[6, 70, 135],
];
function renderItem(params, api) {
var xValue = api.value(0);
var lowPoint = api.coord([xValue, api.value(1)]); //得到下面线的中心坐标
console.log(469, lowPoint);
var highPoint = api.coord([xValue, api.value(2)]); //得到上面线的中心坐标
console.log(472, highPoint);
var halfWidth = api.size([1, 0])[0] * 0.1; //根据x轴索引为1的数值得到所在的映射宽度*0.1
console.log(474, halfWidth);
var style = api.style({
stroke: api.visual("color"),
fill: null,
});
return {
type: "group", //上面那条线
children: [
{
type: "line",
transition: ["shape"],
shape: {
x1: highPoint[0] - halfWidth,
y1: highPoint[1],
x2: highPoint[0] + halfWidth,
y2: highPoint[1],
},
style: style,
},
{
//中间垂直线
type: "line",
transition: ["shape"],
shape: {
x1: highPoint[0],
y1: highPoint[1],
x2: lowPoint[0],
y2: lowPoint[1],
},
style: style,
},
{
//下面那条线
type: "line",
transition: ["shape"],
shape: {
x1: lowPoint[0] - halfWidth,
y1: lowPoint[1],
x2: lowPoint[0] + halfWidth,
y2: lowPoint[1],
},
style: style,
},
],
};
}
// 基于准备好的dom，初始化echarts实例
const testChart4 = echarts.init(document.getElementById("test4"));
// 绘制图表
testChart4.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter(params) {
let str = params.reduce(
(pre, item) =>
pre +
`
收缩压${item.value[2]}<br>
舒张压${item.value[1]}<br>
`,
`${params[0].axisValue}<br>`
);
return str;
},
},
// title: {
// text: "血压(mm/Hg)",
// },
xAxis: {
data: categoryData,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
axisLine: {
onZero: true,
lineStyle: {
type: "solid",
color: "#8298AF", // 左边线的颜色
width: "1", // 坐标线的宽度
},
},
axisTick: {
show: false, // 去除轴下面的刻度
},
},
yAxis: {
name: "血压(mm/Hg)",
// nameLocation: "start",
nameTextStyle: {
// padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离
color: "#0b4ea5",
fontSize: 12, // 字体大小
},
type: "value",
// max: 500,
scale: true,
minInterval: 1.5,
axisLabel: {
textStyle: {
fontSize: 9,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
type: "custom",
name: "血压",
itemStyle: {
normal: {
borderWidth: 1.5,
},
},
renderItem: renderItem,
encode: {
y: [1, 2],
},
data: msgData,
markLine: {
data: [
{
yAxis: 240,
label: {
padding: [0, 0, 0, -75],
position: "end",
formatter: (e) => {
return "最大阈值：" + e.value;
},
},
},
{
yAxis: 40, //警戒值
label: {
padding: [0, 0, 0, -75], //警戒线标签名距离警戒线的位置
position: "end", //警戒线标签的定位，还有minddle等字段。
formatter: (e) => {
//自定义警戒线标签名
return "最小阈值：" + e.value;
},
},
},
],
silent: false, //鼠标移入警戒线，警戒线会变粗，false不变，true变
symbol: false,
lineStyle: {
//警戒线的样式，颜色，宽度，类型
color: "red",
type: "dashed", //还有实线，
width: 1,
},
},
z: 100,
},
],
visualMap: {
pieces: [
{
gt: 40,
lte: 240,
color: "#000",
},
{
gt: 240,
color: "red",
},
{
lte: 40,
color: "red",
},
],
left: "center", //标签距离左边的距离，还可以用left。center等字段
top: "25", //标签距离顶部距离。还可以用top。middle等字段
orient: "horizontal", //标签排列方式，水平和垂直
show: false, //标签是否显示
},
});
let msgData1 = [
[0, 80],
[0, 100],
[1, 60],
[2, 50],
[3, 30],
[4, 10],
[4, 60],
[5, 60],
[6, 70],
];
function renderItem1(params, api) {
// 颜色程度对照表
const bgColorMap = [
[(score) => score >= 80 && score <= 100, () => "#01c800"],
[(score) => score >= 60 && score < 80, () => "#9ed113"],
[(score) => score >= 40 && score < 60, () => "#ddce00"],
[(score) => score >= 20 && score < 40, () => "#ff7b00"],
[(score) => score >= 0 && score < 20, () => "#ff0000"],
];
// 获取符合条件的子数组
const item = bgColorMap.find((item) => item[0](api.value(1)));
// 子数组存在则运行子数组中的第二个元素（执行函数）
let bgColor = item[1](api.value(1));
var xValue = api.value(0);
var lowPoint = api.coord([xValue, api.value(1)]); //得到下面线的中心坐标
// var highPoint = api.coord([xValue, api.value(2)]); //得到上面线的中心坐标
var halfWidth = api.size([1, 0])[0] * 0.1; //根据x轴索引为1的数值得到所在的映射宽度*0.1
var style = api.style({
stroke: api.visual("color"),
fill: null,
});
return {
type: "rect",
shape: {
x: lowPoint[0] - halfWidth,
y: lowPoint[1],
width: halfWidth * 2,
height: halfWidth,
},
style: {
fill: bgColor,
stroke: "#000",
lineWidth: 1,
},
};
}
const testChart5 = echarts.init(document.getElementById("test5"));
// 绘制图表
testChart5.setOption({
// title: {
// text: "睡眠情况",
// },
// legend: {
// data: ["睡眠情况"],
// },
xAxis: {
data: categoryData,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#0b4ea5", // 坐标值得具体的颜色
},
},
axisLine: {
onZero: true,
lineStyle: {
type: "solid",
color: "#8298AF", // 左边线的颜色
width: "1", // 坐标线的宽度
},
},
axisTick: {
show: false, // 去除轴下面的刻度
},
},
yAxis: {
name: "睡眠情况",
// nameLocation: "start",
axisLabel: {
textStyle: {
fontSize: 16,
color: "#fff", // 坐标值得具体的颜色
},
},
nameTextStyle: {
// padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离
color: "#0b4ea5",
fontSize: 12, // 字体大小
},
},
series: [
{
type: "custom",
name: "睡眠情况",
itemStyle: {
normal: {
borderWidth: 1.5,
},
},
renderItem: renderItem1,
data: msgData1,
z: 100,
},
],
});
//联动配置
echarts.connect([testChart1, testChart2, testChart4, testChart5]);
},
},
};
</script>