119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div style="height:100%;width:100%" :id="echartsId"></div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
|
||
|
|
const props = defineProps({
|
||
|
|
echartsId:{
|
||
|
|
type:String,
|
||
|
|
default:'lineId'
|
||
|
|
},
|
||
|
|
data:{
|
||
|
|
type:Array,
|
||
|
|
default:[]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
watch(()=>props.data,val=>{
|
||
|
|
nextTick(()=>{ chartFn() })
|
||
|
|
},{immediate:true,deep:true})
|
||
|
|
|
||
|
|
function chartFn() {
|
||
|
|
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||
|
|
var option;
|
||
|
|
option = {
|
||
|
|
grid: {
|
||
|
|
top: "8%",
|
||
|
|
right: "2%",
|
||
|
|
left: "2%",
|
||
|
|
bottom: "7%",
|
||
|
|
containLabel:true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#ddd"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
backgroundColor: "rgba(255,255,255,1)",
|
||
|
|
padding: [5, 10],
|
||
|
|
textStyle: {
|
||
|
|
color: "#7588E4"
|
||
|
|
},
|
||
|
|
extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
data:props.data.map(v=>{return v.label}),
|
||
|
|
boundaryGap: false,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
splitLine: {
|
||
|
|
show:true ,
|
||
|
|
lineStyle: {
|
||
|
|
type:'dashed',
|
||
|
|
color: "rgba(14,95,255,0.5)"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show:false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "line",
|
||
|
|
smooth:true,
|
||
|
|
showSymbol:false,
|
||
|
|
data: props.data.map(v=>{return v.val}),
|
||
|
|
areaStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(199, 237, 250,0.5)'
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(199, 237, 250,0.2)'
|
||
|
|
}], false)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "rgb(4, 145, 216)"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
width: 1,
|
||
|
|
color:'#00FFFF'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
window.addEventListener('resize',function(){
|
||
|
|
myChart.resize();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
</style>
|