如图所示:
首先我想到了使用echarts,用属性控制x轴y轴的隐藏,然后修改拐点以及折线上的文字
代码:
图表组件
<template>
<div
id="tem-chart"
style=" height: 120px" />
</template>
<script>
const echarts = require('echarts');
export default {
name: 'TemChart',
props: {
temList: {
type: Array,
default: () => []
},
temXAxis: {
type: Array,
default: () => []
}
},
data() {
return {
temChart: null
};
},
mounted() {
this.showChart();
},
watch: {
temList: {
handler(newVal) {
this.showChart();
}
}
},
methods: {
showChart() {
if (this.temChart) this.temChart.dispose();
this.temChart = echarts.init(document.getElementById('tem-chart'));
let option = {
tooltip: {
show: false
},
grid: {
x: -20, // 距离左边
x2: -20, // 距离右边
y: 20, // 距离上边
y2: 0 // 距离下边
},
xAxis: {
show: false, // 不展示x轴
data: this.temXAxis
},
yAxis: {
show: false // 不展示y轴
},
series: [
{
name: '温度',
type: 'line',
smooth: true,
symbolSize: 8, // 拐点圆的大小
animation: false, // hover圆点不缩放
// label 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
label: {
normal: {
show: true, // 折线上的文字是否显示
formatter: '{c}' + '℃', // 格式化显示文字
position: 'top',
textStyle: {
color: '#001832',
fontSize: '13'
}
}
},
data: this.temList,
itemStyle: {
normal: {
color: '#1E4CFE',
borderWidth: 2 // 拐点边框大小
}
}
}
]
};
this.temChart.setOption(option);
const self = this;
setTimeout(function() {
self.temChart.resize();
});
}
}
};
</script>
使用:
<tem-chart
:tem-list="temList"
:tem-x-axis="temXAxis"
class="weather-tem" />
import temChart from './temChart.vue';
export default {
name: 'Message',
components: { temChart },
data() {
return {
temList: [26, 24, 23, 15, 26, 29, 30, 31],
temXAxis: [20, 23, 02, 05, 08, 11, 14, 17]
};
}
};