This commit is contained in:
DESKTOP-FUDKNA8\znjsz
2024-02-28 15:14:02 +08:00
parent ca35a1768d
commit 544e42ac83
15 changed files with 142 additions and 33 deletions

View File

@@ -9,7 +9,16 @@ const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
// 小时数据
const hourData = ref([]);
const hourData = ref([
// { hour: "0:1", data: 10 },
// { hour: "0:2", data: 13 },
// { hour: "0:3", data: 20 },
// { hour: "0:4", data: 12 },
// { hour: "0:5", data: 12 },
// { hour: "0:6", data: 11 },
// { hour: "0:7", data: 10 },
// { hour: "0:8", data: 1 },
]);
store.$subscribe((mutation, state) => {
if (
state.data2.lineHourList == undefined ||
@@ -41,6 +50,7 @@ function setupChart() {
onMounted(() => {
chartChart.value.classList.add("h-full");
// setupChart();
});
</script>

View File

@@ -1,4 +1,5 @@
export const options = {
color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"],
grid: {
top: 10,
bottom: 0,
@@ -11,7 +12,7 @@ export const options = {
data: [],
axisLabel: {
fontSize: 16,
color: '#fff8'
color: "#fff8",
},
axisLine: {
show: true,
@@ -30,16 +31,19 @@ export const options = {
},
splitLine: {
lineStyle: {
color: '#e6e6e633'
}
color: "#e6e6e633",
},
},
axisLabel: {
fontSize: 16,
color: '#fff8'
color: "#fff8",
},
minInterval: 1,
max: 100,
min: 1
// max: 100,
// min: 1
max: function(value) {
return value.max + Math.floor(value.max / 4)
}
},
series: [
{
@@ -48,6 +52,16 @@ export const options = {
type: "bar",
// barWidth: 20,
showBackground: true,
label: {
show: true,
distance: 20,
rotate: 90,
color: '#fff',
fontSize: 16,
verticalAlign: "middle",
position: 'top',
formatter: "{c}"
},
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},

View File

@@ -42,7 +42,50 @@ export const options = {
},
minInterval: 1,
},
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
series: [
{
type: "bar",
label: {
show: true,
distance: 20,
rotate: 90,
color: "#fff",
verticalAlign: "middle",
position: 'top',
formatter: (params) => {
return params.data[1];
},
},
},
{
type: "bar",
label: {
show: true,
distance: 20,
rotate: 90,
color: "#fff",
verticalAlign: "middle",
position: 'top',
formatter: (params) => {
return params.data[2];
},
},
},
{
type: "bar",
label: {
show: true,
distance: 20,
rotate: 90,
color: "#fff",
verticalAlign: "middle",
position: 'top',
formatter: (params) => {
return params.data[3];
},
},
},
],
};
export default function setup(

View File

@@ -10,9 +10,6 @@ const chartContainer = ref(null);
const chartInstance = ref(null);
const store = useWsStore();
// 绿色24FF5E
// 黄色FFB524
// 红色FF3737
onMounted(() => {
chartContainer.value.classList.add("h-full");
const d = loadData(store.data2.monthlyTarget);

View File

@@ -1,4 +1,5 @@
export const options = {
color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
grid: {
top: 0,
left: 0,
@@ -13,7 +14,7 @@ export const options = {
top: "70%",
textStyle: {
fontSize: 16,
color: '#fffa'
color: '#fffd'
},
},
{
@@ -23,7 +24,7 @@ export const options = {
top: "85%",
textStyle: {
fontSize: 16,
color: '#fffa'
color: '#fffd'
},
},
{
@@ -33,7 +34,7 @@ export const options = {
top: "70%",
textStyle: {
fontSize: 16,
color: '#fffa'
color: '#fffd'
},
},
{
@@ -43,7 +44,7 @@ export const options = {
top: "85%",
textStyle: {
fontSize: 16,
color: '#fffa'
color: '#fffd'
},
},
],

View File

@@ -10,9 +10,6 @@ const chartContainer = ref(null);
const chartInstance = ref(null);
const store = useWsStore();
// 绿色24FF5E
// 黄色FFB524
// 红色FF3737
onMounted(() => {
chartContainer.value.classList.add("h-full");
const d = loadData(store.data2.dailyTarget);

View File

@@ -1,4 +1,5 @@
export const options = {
color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
grid: {
top: 0,
left: 0,
@@ -13,7 +14,7 @@ export const options = {
top: "70%",
textStyle: {
fontSize: 16,
color: "#fffa",
color: "#fffd",
},
},
{
@@ -23,7 +24,7 @@ export const options = {
top: "85%",
textStyle: {
fontSize: 16,
color: "#fffa",
color: "#fffd",
},
},
{
@@ -33,7 +34,7 @@ export const options = {
top: "70%",
textStyle: {
fontSize: 16,
color: "#fffa",
color: "#fffd",
},
},
{
@@ -43,7 +44,7 @@ export const options = {
top: "85%",
textStyle: {
fontSize: 16,
color: "#fffa",
color: "#fffd",
},
},
],

View File

@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) {
/** 有状态,处理数据 */
function __apply(yieldArray) {
const d = loadData(yieldArray);
// const d = loadData([
// { teamName: "A组", yield: 11 },
// { teamName: "B组", yield: 23 },
// { teamName: "C组", yield: 14 },
// ]);
if (!d) {
showChartDom.value = false;
if (chart.value) chart.value.dispose();
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => {
onMounted(() => {
chartChart.value.classList.add("h-full");
// __apply();
});
</script>

View File

@@ -37,6 +37,11 @@ function setupChart(chart, dom, data) {
/** 有状态,处理数据 */
function __apply(yieldArray) {
const d = loadData(yieldArray);
// const d = loadData([
// { teamName: "A组", yield: 11 },
// { teamName: "B组", yield: 23 },
// { teamName: "C组", yield: 14 },
// ]);
if (!d) {
showChartDom.value = false;
if (chart.value) chart.value.dispose();
@@ -53,6 +58,7 @@ store.$subscribe((mutation, state) => {
onMounted(() => {
chartChart.value.classList.add("h-full");
// __apply();
});
</script>