feat: 初步完成各模块图表的构建，后续完善细节
parent
4480923404
commit
d8e35d30a0
@ -0,0 +1,296 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
function generateData(totalNum, bigvalue, smallvalue, color) {
|
||||||
|
let dataArr = [];
|
||||||
|
for (var i = 0; i < totalNum; i++) {
|
||||||
|
if (i % 2 === 0) {
|
||||||
|
dataArr.push({
|
||||||
|
name: (i + 1).toString(),
|
||||||
|
value: bigvalue,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: color,
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
dataArr.push({
|
||||||
|
name: (i + 1).toString(),
|
||||||
|
value: smallvalue,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return dataArr;
|
||||||
|
}
|
||||||
|
function initChart() {
|
||||||
|
const chartDom = document.getElementById("diggerHourlyDistanceChart");
|
||||||
|
const mainChart = echarts.init(chartDom);
|
||||||
|
|
||||||
|
let data1 = [
|
||||||
|
{
|
||||||
|
name: "05:00",
|
||||||
|
value: 175,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "06:00",
|
||||||
|
value: 148,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "07:00",
|
||||||
|
value: 95,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "08:00",
|
||||||
|
value: 175,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "09:00",
|
||||||
|
value: 148,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "10:00",
|
||||||
|
value: 95,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "11:00",
|
||||||
|
value: 56,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "12:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "13:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "14:00",
|
||||||
|
value: 123,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "15:00",
|
||||||
|
value: 175,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "16:00",
|
||||||
|
value: 148,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "17:00",
|
||||||
|
value: 95,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "18:00",
|
||||||
|
value: 123,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "19:00",
|
||||||
|
value: 175,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "20:00",
|
||||||
|
value: 148,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "21:00",
|
||||||
|
value: 95,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "22:00",
|
||||||
|
value: 148,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "23:00",
|
||||||
|
value: 95,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let xAxisData = [];
|
||||||
|
let seriesData1 = [];
|
||||||
|
|
||||||
|
data1.forEach((item) => {
|
||||||
|
xAxisData.push(item.name);
|
||||||
|
seriesData1.push(item.value);
|
||||||
|
});
|
||||||
|
const yList = [80, 100, 100, 100];
|
||||||
|
const xList = ["寿命≤100", "100<寿命≤200", "200<寿命≤300", "寿命>300"];
|
||||||
|
const color = ["#00FEEE", "#2fd28d", "#c4742d", "#c42d2d"];
|
||||||
|
const xData = xList.map((item, index) => {
|
||||||
|
return {
|
||||||
|
value: item,
|
||||||
|
textStyle: {
|
||||||
|
color: color[index],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const dom = 200;
|
||||||
|
const barWidth = dom / 10;
|
||||||
|
const colors = [
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x: 1,
|
||||||
|
x2: 1,
|
||||||
|
y: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(216,216,216,0)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(103,236,228,0.53)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#00FEEE",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const colors1 = [
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
x2: 0,
|
||||||
|
y: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0.3,
|
||||||
|
color: "#4bcde4",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#4b88e4",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const option = {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
//X轴
|
||||||
|
xAxis: {
|
||||||
|
name: "X",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
padding: [0, 0, 0, 50],
|
||||||
|
},
|
||||||
|
|
||||||
|
data: xAxisData,
|
||||||
|
show: true,
|
||||||
|
type: "category",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/**区域位置*/
|
||||||
|
grid: {
|
||||||
|
// Adjust grid for spacing
|
||||||
|
left: "5%",
|
||||||
|
right: "0%",
|
||||||
|
bottom: "5%",
|
||||||
|
top: "15%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: barWidth,
|
||||||
|
symbolOffset: ["10%", "50%"],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
return colors[0];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: seriesData1,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
// 实体柱状图底部
|
||||||
|
z: 4,
|
||||||
|
type: "pictorialBar",
|
||||||
|
data: seriesData1,
|
||||||
|
|
||||||
|
symbolOffset: ["0%", "0%"],
|
||||||
|
symbolSize: [barWidth, barWidth * 0.3],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
return "rgba(0,255,252,0.1)";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 实体柱状图顶部
|
||||||
|
z: 3,
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbolPosition: "end",
|
||||||
|
data: seriesData1,
|
||||||
|
symbolOffset: ["0%", "-50%"],
|
||||||
|
symbolSize: [barWidth, barWidth * 0.3],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 0,
|
||||||
|
color: function (params) {
|
||||||
|
return colors1[0];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
mainChart.setOption(option);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
initChart();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="diggerHourlyDistanceChart" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue