<!--折线图-->标签:color,rgba,折线图,FFF,echarts,2022.01,255 From: https://www.cnblogs.com/connie256/p/17117662.html
<template>
<div class="chartBox">
<!--echart图标-->
<div id="lineChart" ref="lineChart"></div>
</div>
</template>
<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
name: "scatterDiagram",
props:{
//折线是否平滑
smooth:{
type:Boolean,
default:false
},
//填充的颜色
areaColor:{
type:String,
default:'transparent'
}
},
data() {
return {
lineChart: null,
}
},
mounted() {
this.initEchart();
},
methods: {
initEchart() {
// 基于准备好的dom,初始化echarts实例
this.lineChart = echarts.init(this.$refs.lineChart);
let option = {
textStyle:{
color:'#FFF',
fontSize:12,
},
grid: {
left:40,
right:30,
top:40,
bottom:25
},
title: {
subtext: "时长/h",
top: -15,
left: 0,
subtextStyle: { // 设置二级标题的样式
color: "#FFF"
}
},
xAxis: {
type: 'category',
data: ['2022.01.02', '2022.01.03', '2022.01.04', '2022.01.05', '2022.01.06', '2022.01.07'],
nameTextStyle:{
color:'#FFF',
fontSize:12
},
axisLine:{
onZero: false,
lineStyle:{
color:'rgba(255,255,255,0.2)'
}
},
axisLabel: {
interval: 0,
margin: 15
},
axisTick:{
lineStyle:{
color:'rgba(255,255,255,0.2)'
}
},
// boundaryGap:false
},
yAxis: {
type: 'value',
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0.2)'
}
},
},
series: [
{
data: [321, 624, 738, 922, 500,200],
smooth: this.smooth,
label:{
show:true,
position: 'top' ,
distance: 14,
textStyle:{
color:'#FFF',
fontSize:12
}
},
symbolSize: 10, //折线点的大小
symbol: 'circle', //折线点设置为实心点
type: 'line',
areaStyle: {
color:this.areaColor
},
itemStyle: {
normal: {
shadowColor: 'rgba(83,206,253,0.2)',
color:'#F8D501', //折线点的颜色
borderColor: '#FFF', //拐点边框颜色
borderWidth: 1, //拐点边框大小
},
},
lineStyle: {
color:'#53CEFD', //折线的颜色
},
emphasis:{
disabled:false,
focus:'series',
itemStyle:{
shadowColor: 'rgba(248,213,1, 0.5)',
shadowBlur: 1000
},
areaStyle: {
shadowColor: 'rgba(248,213,1, 0.5)',
shadowBlur: 1000
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
this.lineChart.setOption(option);
}
}
}
</script>
<style scoped lang="scss">
.chartBox {
width: 100%;
box-sizing: border-box;
padding: 1.6rem 1.6rem 0;
flex: 1;
#lineChart {
height: calc(100% - 16px);
}
}
</style>