You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
4.0 KiB
Vue
217 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import * as echarts from "echarts";
|
|
const props = defineProps({
|
|
datas: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
});
|
|
function initChart() {
|
|
const chartDom = document.getElementById("diggerDailyDistanceChart");
|
|
const mainChart = echarts.init(chartDom);
|
|
let finalData = [];
|
|
|
|
for (let key in props.datas) {
|
|
finalData.push({
|
|
name: key + "日",
|
|
value: props.datas[key],
|
|
});
|
|
}
|
|
// let finalData = [
|
|
// {
|
|
// name: "1日",
|
|
// value: 175,
|
|
// },
|
|
// {
|
|
// name: "2日",
|
|
// value: 148,
|
|
// },
|
|
// {
|
|
// name: "3日",
|
|
// value: 195,
|
|
// },
|
|
// {
|
|
// name: "4日",
|
|
// value: 115,
|
|
// },
|
|
// {
|
|
// name: "5日",
|
|
// value: 148,
|
|
// },
|
|
// {
|
|
// name: "6日",
|
|
// value: 95,
|
|
// },
|
|
// {
|
|
// name: "7日",
|
|
// value: 56,
|
|
// },
|
|
// {
|
|
// name: "8日",
|
|
// value: 45,
|
|
// },
|
|
// {
|
|
// name: "9日",
|
|
// value: 15,
|
|
// },
|
|
// {
|
|
// name: "10日",
|
|
// value: 48,
|
|
// },
|
|
// {
|
|
// name: "11日",
|
|
// value: 95,
|
|
// },
|
|
// {
|
|
// name: "12日",
|
|
// value: 128,
|
|
// },
|
|
// {
|
|
// name: "13日",
|
|
// value: 34,
|
|
// },
|
|
// {
|
|
// name: "14日",
|
|
// value: 123,
|
|
// },
|
|
// {
|
|
// name: "15日",
|
|
// value: 175,
|
|
// },
|
|
// {
|
|
// name: "16日",
|
|
// value: 148,
|
|
// },
|
|
// ];
|
|
let xAxisData = [];
|
|
let seriesData2 = [];
|
|
|
|
finalData.forEach((item) => {
|
|
xAxisData.push(item.name);
|
|
seriesData2.push(item.value);
|
|
});
|
|
let option = {
|
|
tooltip: {
|
|
textStyle: {
|
|
color: "#000",
|
|
},
|
|
padding: [10, 10],
|
|
trigger: "axis",
|
|
backgroundColor: "#fff",
|
|
borderColor: "rgba(112, 119, 242, 0.8)",
|
|
borderWidth: 1,
|
|
},
|
|
grid: {
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "5%",
|
|
top: "15%",
|
|
containLabel: true,
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
},
|
|
|
|
xAxis: {
|
|
type: "category",
|
|
data: xAxisData,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#B4C0CC",
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#35414D",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#B4C0CC",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "line",
|
|
data: seriesData2,
|
|
symbolSize: 10,
|
|
symbol: "circle",
|
|
smooth: false,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
show: false,
|
|
// textStyle: {
|
|
// color: "#FFD15C",
|
|
// fontSize: 20,
|
|
// fontFamily: "DIN",
|
|
// fontWeight: "bold",
|
|
// },
|
|
position: "top",
|
|
formatter: function (p) {
|
|
return p.value > 0 ? p.value : "";
|
|
},
|
|
},
|
|
lineStyle: {
|
|
width: 2,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(255, 209, 92, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(255, 209, 92, 1)",
|
|
},
|
|
]),
|
|
shadowColor: "rgba(255, 209, 92, 0.4)",
|
|
shadowBlur: 10,
|
|
shadowOffsetY: 10,
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(255, 209, 92, 1)",
|
|
borderColor: "",
|
|
borderWidth: 3,
|
|
shadowColor: "rgba(255, 209, 92, 01)",
|
|
shadowBlur: 5,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
mainChart.setOption(option);
|
|
}
|
|
watch(
|
|
() => props.datas,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
initChart();
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div id="diggerDailyDistanceChart" style="width: 960px; height: 100%"></div>
|
|
</template>
|