首先你需要安装echarts 我安装的是 "echarts": "^5.5.1" 这个版本,具体数据需要根据自己的情况通过组件传值自行处理,这里只是一个静态数据做展示
父组件中
<template>
<div>
<Echarts/>
</div>
</template>
<script setup>
import Echarts from '../../components/Echarts/Index.vue'
</script>
在Echarts文件夹下新建Index.vue作为子组件
<template>
<div id="main"></div>
</template>
<script setup>
import * as echarts from 'echarts/core';
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
MarkLineComponent,
MarkPointComponent
} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
MarkLineComponent,
MarkPointComponent,
LineChart,
CanvasRenderer,
UniversalTransition
]);
onMounted(() => {
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
let option;
option = {
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
// 去除坐标轴线
axisLine: {
show: false
},
// 去除坐标轴刻度
axisTick: {
show: false
},
// 隐藏坐标轴数值
axisLabel: {
show: false
}
},
yAxis: {
splitLine: {
show: false
},
// 去除坐标轴线
axisLine: {
show: false
},
// 去除坐标轴刻度
axisTick: {
show: false
},
// 隐藏坐标轴数值
axisLabel: {
show: false
}
},
labelLine: {
show: false,
},
series: [
{
name: '实虚线',
type: 'line',
smooth: true,
symbolSize: 10,
data: [23, 20, '', '', '', '', ''],
lineStyle: {
width: 3,
type: 'dotted',
},
label: {
show: true,
position: 'top',
formatter: '{c} °C'
},
},
{
name: '实虚线',
type: 'line',
smooth: true,
symbolSize: 10,
data: ['', 20, 25, 46, 26, 20, 18],
lineStyle: {
width: 2,
},
label: {
show: true,
position: 'top',
formatter: '{c} °C'
// 绝对的像素值
// position: [30, 10],
},
},
{
name: '实线',
type: 'line',
smooth: false,
data: [10, 11, 13, 11, 12, 12, 9],
symbolSize: 10,
lineStyle: {
color: '#ffffff',
width: 2,
},
label: {
show: true,
position: 'top',
formatter: '{c} °C'
},
},
{
name: '虚线',
type: 'line',
smooth: false,
data: [4, 6, 7, 2, 3, 4, 1],
symbolSize: 10,
lineStyle: {
color: '#ffffff',
width: 2,
type: 'dashed'
},
label: {
show: true,
position: 'top',
formatter: '{c} °C'
},
},
]
};
option && myChart.setOption(option);
})
</script>
<style scoped>
#main {
width: 100vw;
height: 50vh;
background: rgb(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
</style>