<template>
<div>
<!-- 数据来源 -->
<div class="echarts" ref="echartsRef"></div>
</div>
</template>
<script setup lang='ts' name="reconciled">
import { ref } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/disco/hooks/useEcharts";
const echartsRef = ref<HTMLElement>();
const initChart = (data: any) => {
console.log(data)
const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
let dataC1 = [20, 30, 60, 40, 50, 30];
let xData = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'];
// let xData = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'];
// const fontColor = '#30eee9';
const option = {
backgroundColor: '#ffffff',
grid: {
left: '5%',
right: '2%',
top: '10%',
bottom: '15%',
},
legend: {
data:['a'],
textStyle:{
color:'#A9DDEE',
},
orient: 'horizontal',
icon: 'rect',
top: '5',
right: '5%',
itemGap: 10,
itemWidth: 12,
itemHeight: 7,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#57617B',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false, //顶头显示
//横坐标下方坐标线线头
axisTick: {
show: false,
lineStyle: {
color: '#3585d5',
},
},
//true 显示横坐标竖线
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#3585d5',
}
},
//true显示下方的线
axisLine: {
show: false,
lineStyle: {
color: '#3585d5',
},
},
// axisTick: { show: false },
//true显示横坐标的字 false:不显示
axisLabel: { show: false },
// axisLabel: {
// fontSize: 18,
// },
data: xData,
},
yAxis: {
type: 'value',
min: 0,
// max: 140,
splitNumber: 2,
splitLine: {
show: true,
lineStyle: {
color: '#E2E2EA',
type: 'dashed',
}
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
boundaryGap: false,
},
series: [
{
name: '',
type: 'line',
stack: '',
smooth: true,
showAllSymbol: true,
// symbol: 'circle', //none 不设置 circle 设定为实心点
showSymbol: true,//是否默认展示圆点
symbolSize: 12, //设定实心点的大小
symbol: (value:any,ind:any)=>{
//console.log(value,ind)
value = 60; //如果数字等于60 只显示为60的点
if (value == ind.value) {
return "circle";
} else {
return "none";
}
},
//是否显示点上的值
label: {
show: false,
position: 'top',
textStyle: {
color: '#00b3f4',
}
},
lineStyle: {
normal: {
width: 2,
color: "rgba(25,163,223,1)", // 线条颜色
},
borderColor: 'rgba(0,0,0,.4)',
},
itemStyle: { //线区域设置
color: "#00b3f4",
borderColor: "#fff",
borderWidth: 3,
// shadowColor: 'rgba(22, 137, 229)',
// shadowBlur: 14
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,179,244,0.3)'
},
{
offset: 1,
color: 'rgba(0,179,244,0)'
}
], false),
shadowColor: 'rgba(0,179,244, 0.9)',
shadowBlur: 20
}
},
// itemStyle: {
// color: "#fff",
// borderColor: "#fff",
// borderWidth: 3,
// shadowColor: 'rgba(0, 0, 0, .3)',
// shadowBlur: 0,
// shadowOffsetY: 2,
// shadowOffsetX: 2,
// normal: { //改变折线点的颜色
// color: '#1F824E',
// lineStyle: {//改变折线颜色
// color: '#1F824E',
// width: 3,
// },
// areaStyle: {
// //color: '#94C9EC'
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0.4,
// color: 'rgba(240, 250, 230,0.1)',
// },
// {
// offset: 1,
// color: 'rgba(240, 250, 230,0.9)',
// },
// ]),
// },
// },
// },
data: dataC1,
},
],
};
useEcharts(myChart, option);
}
defineExpose({
initChart
});
</script>
<style lang="scss" scoped>
.echarts {
width: 212px;
height: 170px;
}
</style>
