echart总结




定义option

const option = ref({});

const chart = ref()

option.value = {

tooltip: {

trigger: "axis",

axisPointer: {

type: "shadow",

},

},

legend: {

textStyle: {

color: "#fff",

fontSize: 16,

},

top:'4%',

},

grid: {

left: "3%",

right: "0%",

bottom: "3%",

containLabel: true,

},

xAxis: {

type: "category",

data: [],

axisLabel: {

color: "#fff",

interval: 0,

fontSize: 16,

},

},

yAxis: {

type: "value",

axisLabel: {

color: "#fff",

interval: 0,

fontSize: 16,

},

splitLine:{

lineStyle:{

color: 'rgba(106,110,126,0.5)'

}

}

},

series: [

],

};

接口返回数据时的处理方式

if (res.success) {

console.log('res.data.data',res.data.data.length)

if (res.data.data.length > 0) {

let newList = [];

newList = res.data.series;

option.value.xAxis.data = res.data.xAxis;

newList.forEach((item) => {

item.type = "bar",

item.barWidth = "30",

item.label = {

show: true,

position: "top",

fontSize: "16",

color: "#fff",

};

});

option.value.series = newList;

window.onresize = chart.value.resize();

}else {

option.value.xAxis.data = []

option.value.series = []

}

复制代码
}
相关推荐
前端涂涂1 天前
哈希指针,什么是区块链,genesis blcok,most recent block,tamper-evident log,merkle tree,binar
前端
尽兴-1 天前
问题记录:数据库字段 `CHAR(n)` 导致前端返回值带空格的排查与修复
前端·数据库·mysql·oracle·达梦·varchar·char
DsirNg1 天前
Vue 3:我在真实项目中如何用事件委托
前端·javascript·vue.js
克喵的水银蛇1 天前
Flutter 适配实战:屏幕适配 + 暗黑模式 + 多语言
前端·javascript·flutter
冬男zdn1 天前
Next.js 16 + next-intl App Router 国际化实现指南
javascript·typescript·reactjs
有意义1 天前
this 不是你想的 this:从作用域迷失到调用栈掌控
javascript·面试·ecmascript 6
前端涂涂1 天前
第2讲:BTC-密码学原理 北大肖臻老师客堂笔记
前端
能不能送我一朵小红花1 天前
基于uniapp的PDA手持设备红外扫码方案
前端·uni-app
风止何安啊1 天前
别被 JS 骗了!终极指南:JS 类型转换真相大揭秘
前端·javascript·面试
拉不动的猪1 天前
深入理解 Vue keep-alive:缓存本质、触发条件与生命周期对比
前端·javascript·vue.js