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 = []

}

复制代码
}
相关推荐
该用户已不存在5 小时前
这6个网站一旦知道就离不开了
前端·后端·github
Ai行者心易5 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端·后端
东东2335 小时前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼5 小时前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽5 小时前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥5 小时前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴5 小时前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长6 小时前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit6 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_6 小时前
[css] border 渐变
前端·css