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