从后端拿数据做柱形图 response是正常的 在vue中设置ref响应数据总是没有变化 代码如下
<div class="schart-box">
<div class="content-title">柱状图</div>
<schart class="schart" canvasId="bar" :options="options1"></schart>
</div>
name: "basecharts",
components: {
Schart,
},
setup() {
// const state = reactive({
// arr: [0,0,0,0,0,0]
const state=ref([0,0,0,0,0,0])
console.log(state.value)
;
const datalist = () => {
getcount().then(
(res) => {
console.log(res)
state.value = res.countlist
console.log(state.value)
})
};
onMounted(()=>datalist())
const options1 = {
type: "bar",
title: {
text: "最近一周各品类销售图",
},
bgColor: "#fbfbfb",
labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"],//横坐标名称
datasets: [
{
label: "系统故障",
fillColor: "rgba(241, 49, 74, 0.5)",
data: state.value,
},
{
label: "油液渗漏",
data: state.value,
},
],
};
其中data里面的state总是没有变化 得不到响应
希望巨佬能教教我怎么改 卡了好几天了
setup 里面的值暴露出来。
刷新没有变化吗,可以拿到响应数据,无法渲染吗
<template>
<div>
<div class="schart-box">
<div class="content-title">柱状图</div>
<schart
class="schart"
canvasId="bar"
:options="state1.options1"
></schart>
</div>
</div>
</template>
<script>
import Schart from "vue-schart";
// import {getcount} from "../api";
import {
ref,
reactive,
onMounted,
onUpdated,
onBeforeMount,
toRefs,
} from "vue";
export default {
name: "basecharts",
components: {
Schart,
},
setup() {
// const state = reactive({
// arr: [0,0,0,0,0,0]
const state = ref([1, 1, 1, 2, 2, 2]);
// console.log(state.value);
// const state = reactive({ data: [1, 1, 1, 2, 2, 2] });
const state1 = reactive({
options1: {
type: "bar",
title: {
text: "最近一周各品类销售图",
},
bgColor: "#fbfbfb",
labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"], //横坐标名称
datasets: [
{
label: "系统故障",
fillColor: "rgba(241, 49, 74, 0.5)",
data: state.value,
},
{
label: "油液渗漏",
data: state.value,
},
],
},
});
const datalist = () => {
console.log("123", state.value);
// getcount().then(
// (res) => {
// console.log(res)
// state.value = res.countlist
// console.log(state.value)
// })
setTimeout(() => {
state.value = [1, 2, 3, 4, 5];
state1.options1 = {
type: "bar",
title: {
text: "最近一周各品类销售图",
},
bgColor: "#fbfbfb",
labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"], //横坐标名称
datasets: [
{
label: "系统故障",
fillColor: "rgba(241, 49, 74, 0.5)",
data: state.value,
},
{
label: "油液渗漏",
data: state.value,
},
],
};
console.log(state1);
}, 300);
};
onMounted(() => datalist());
return {
state1,
};
},
};
</script>