1、效果展示
2、完整代码，直接cv即可跑起来
<template>
<div id="mainend"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'LineChart',
mounted() {
this.initChart();
this.registerUser();
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
methods: {
// 初始化图表
initChart() {
const chartDom = document.getElementById('mainend');
this.chart = echarts.init(chartDom);
const option = {
legend: {
data: ['入住人数', '退住人数'],
textStyle: {
fontSize: 12, // 图例字体大小
color: '#FFFFFF' // 图例字体颜色
},
icon: "rect", // 图例标记的图形
right: '100px', // 水平居中
top: 'top', // 放置在顶部
itemWidth: 17, // 图例标记的宽度
itemHeight: 17 // 图例标记的高度，形成小正方形
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line', // 可以是 'line'（直线）、'shadow'（阴影）、'cross'（交叉线）
crossStyle: {
color: '#fff', // 交叉线的颜色
width: 2, // 交叉线的宽度
type: 'solid' // 交叉线的类型，设置为实线
},
lineStyle: {
color: '#FFFFFF', // 交叉线的颜色
width: 2, // 交叉线的宽度
type: 'solid' // 交叉线的类型，设置为实线
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
name: '月份',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 0, 0, 20], // 调整位置
fontSize: 14,
color: '#03DEFF' // 坐标轴颜色
},
data: [
'1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月'
],
axisLine: {
show: true,
symbol: ['none', 'rect'], // 表示X轴起始位子设置为块装
symbolSize: [1, 50] // 表示延伸位置宽度为 1px ,延伸长度为100px
},
splitLine: {
show: true,
lineStyle: {
color: '#2D3C5C', // 网格线颜色
type: 'solid' // 网格线类型，如 'solid', 'dashed', 'dotted'
}
},
axisLabel: {
color: '#FFFFFF', // X轴文字颜色
fontSize: 12 // X轴文字字体大小
}
},
yAxis: {
type: 'value',
min: 0,
name: '人数',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 0, 25, 0], // 调整位置
fontSize: 14,
color: '#03DEFF' // 坐标轴颜色
},
axisLine: {
show: true,
symbol: ['none', 'rect'], // 表示Y轴起始位子设置为块装
symbolSize: [1, 50] // 表示延伸位置宽度为 1px ,延伸长度为100px
},
axisLabel: {
color: '#FFFFFF', // Y轴文字颜色
fontSize: 12 // Y轴文字字体大小
},
// max: 30,
splitLine: {
show: true,
lineStyle: {
color: '#2D3C5C', // 网格线颜色
type: 'solid' // 网格线类型，如 'solid', 'dashed', 'dotted'
}
}
},
series: [
{
name: '入住人数',
data: [10, 10, 13, 16, 10, 15, 26, 10, 25, 10, 10, 10],
type: 'line',
symbolSize: 10, // 调整节点的大小
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#317AFF' },
{ offset: 1, color: 'transparent' }
])
},
itemStyle: {
color: '#1F68E2',
shadowBlur: 10,
shadowColor: '#6CECFF'
},
lineStyle: {
color: '#317AFF'
}
},
{
name: '退住人数',
data: [10, 10, 13, 16, 10, 15, 26, 10, 25, 10, 10, 10],
symbolSize: 10,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#37DACE' },
{ offset: 1, color: 'transparent' }
])
},
itemStyle: {
color: '#37DACE',
shadowBlur: 10,
shadowColor: '#37DACE'
},
lineStyle: {
color: '#37DACE'
}
}
]
};
this.chart.setOption(option);
},
// 更新图表数据
updateChart(inValues, outValues) {
this.chart.setOption({
series: [
{
name: '入住人数',
data: inValues // 将后端数据更新到图表上
},
{
name: '退住人数',
data: outValues // 将后端数据更新到图表上
}
]
});
}
}
};
</script>
<style scoped>
#mainend {
width: 920px;
height: 420px;
}
</style>
复制以上代码就能直接运行起来
3、这个就是右上角的图例设置
legend: {
data: ['入住人数', '退住人数'], // 图例中显示的系列名称
textStyle: {
fontSize: 12, // 图例文本的字体大小
color: '#FFFFFF' // 图例文本的颜色
},
icon: "rect", // 图例标记的图形类型，这里是小矩形（'rect'），其他类型还有 'circle'、'roundRect'、'triangle'、'diamond' 等
right: '100px', // 图例的水平位置，离右边的距离
top: 'top', // 图例的垂直位置，放置在图表顶部
itemWidth: 17, // 图例标记的宽度
itemHeight: 17 // 图例标记的高度，形成小正方形
}
4、这个就是提示框就是鼠标移动上去的时候显示竖线的设置
tooltip: {
trigger: 'axis', // 提示框的触发类型，这里设置为 'axis'，表示当鼠标悬停在坐标轴上的某一点时，显示对应的提示框
axisPointer: {
type: 'line', // 指示器的类型，可以是 'line'（直线）、'shadow'（阴影）、'cross'（交叉线）
crossStyle: {
color: '#fff', // 交叉线的颜色
width: 2, // 交叉线的宽度
type: 'solid' // 交叉线的类型，设置为实线
},
lineStyle: {
color: '#FFFFFF', // 直线的颜色
width: 2, // 直线的宽度
type: 'solid' // 直线的类型，设置为实线
}
}
}
5、这个就是x轴的操作
xAxis: {
type: 'category', // X 轴的类型，这里设置为 'category'，表示 X 轴是类目轴
boundaryGap: false, // 类目轴的两边是否留白，设置为 false 表示不留白
name: '月份', // X 轴的名称
nameLocation: 'end', // X 轴名称的位置，这里设置为 'end'，表示在轴的末尾
nameTextStyle: {
padding: [0, 0, 0, 20], // X 轴名称的内边距，分别为 [上, 右, 下, 左]
fontSize: 14, // X 轴名称的字体大小
color: '#03DEFF' // X 轴名称的字体颜色
},
data: [
'1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月'
], // X 轴的类目数据
axisLine: {
show: true, // 是否显示 X 轴轴线
symbol: ['none', 'rect'], // 轴线两端的标记，这里表示 X 轴的起始位置没有标记，结束位置有一个矩形标记
symbolSize: [1, 50] // 轴线标记的大小，[宽度, 高度]，这里表示标记的宽度为 1px，高度为 50px
},
splitLine: {
show: true, // 是否显示网格线
lineStyle: {
color: '#2D3C5C', // 网格线的颜色
type: 'solid' // 网格线的类型，这里设置为 'solid'，表示实线
}
},
axisLabel: {
color: '#FFFFFF', // X 轴刻度标签的文字颜色
fontSize: 12 // X 轴刻度标签的字体大小
}
}
注意：boundaryGap的意思是获取的点是否从y轴上开始，symbol延长线，
6、y轴的操作
yAxis: {
type: 'value', // Y 轴的类型，这里设置为 'value'，表示 Y 轴是数值轴
min: 0, // Y 轴的最小值
name: '人数', // Y 轴的名称
nameLocation: 'end', // Y 轴名称的位置，这里设置为 'end'，表示在轴的末尾
nameTextStyle: {
padding: [0, 0, 25, 0], // Y 轴名称的内边距，分别为 [上, 右, 下, 左]
fontSize: 14, // Y 轴名称的字体大小
color: '#03DEFF' // Y 轴名称的字体颜色
},
axisLine: {
show: true, // 是否显示 Y 轴轴线
symbol: ['none', 'rect'], // 轴线两端的标记，这里表示 Y 轴的起始位置没有标记，结束位置有一个矩形标记
symbolSize: [1, 50] // 轴线标记的大小，[宽度, 高度]，这里表示标记的宽度为 1px，高度为 50px
},
axisLabel: {
color: '#FFFFFF', // Y 轴刻度标签的文字颜色
fontSize: 12 // Y 轴刻度标签的字体大小
},
splitLine: {
show: true, // 是否显示网格线
lineStyle: {
color: '#2D3C5C', // 网格线的颜色
type: 'solid' // 网格线的类型，这里设置为 'solid'，表示实线
}
}
}
7、 数据的操作
series: [
{
name: '入住人数',
data: [10, 10, 13, 16, 10, 15, 26, 10, 25, 10, 10, 10], // 系列的数据
type: 'line', // 系列的图表类型，这里设置为折线图
symbolSize: 10, // 数据点的大小
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#317AFF' }, // 渐变色开始颜色
{ offset: 1, color: 'transparent' } // 渐变色结束颜色
])
},
itemStyle: {
color: '#1F68E2', // 数据点的颜色
shadowBlur: 10, // 数据点的阴影模糊程度
shadowColor: '#6CECFF' // 数据点的阴影颜色
},
lineStyle: {
color: '#317AFF' // 折线的颜色
}
},
{
name: '退住人数',
data: [10, 10, 13, 16, 10, 15, 26, 10, 25, 10, 10, 10], // 系列的数据
symbolSize: 10, // 数据点的大小
type: 'line', // 系列的图表类型，这里设置为折线图
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#37DACE' }, // 渐变色开始颜色
{ offset: 1, color: 'transparent' } // 渐变色结束颜色
])
},
itemStyle: {
color: '#37DACE', // 数据点的颜色
shadowBlur: 10, // 数据点的阴影模糊程度
shadowColor: '#37DACE' // 数据点的阴影颜色
},
lineStyle: {
color: '#37DACE' // 折线的颜色
}
}
]
注意：lineStyle折现的颜色，areaStyle区域底下阴影的渐变色，symbolSize数据点也就是每个拐点的大小
