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

}

复制代码
}
相关推荐
AlienZHOU5 小时前
DeepSeek Harness 插件:HTML 实时可视化编辑
前端·agent·deepseek
剪刀石头布啊7 小时前
javascript手动实现继承
前端
Elias不吃糖8 小时前
Langfuse 入门:Trace、Prompt、Dataset、Experiment、Evaluator
前端·python·prompt·langfuse
vipbic8 小时前
一个前端的 9 天重构:我是怎么用 Codex 重做航栈的
前端·javascript·后端
Eason_Lou9 小时前
【无标题】
前端·vue.js·html
_codemonster10 小时前
npm run dev 是在开发模式运行,怎么在生产环境运行
前端·npm·node.js
kyriewen10 小时前
我受够了复制报错去问 AI,花一下午给控制台做了个调试助手
前端·javascript·ai编程
IT_陈寒11 小时前
Redis的DEL命令竟然没删掉数据?我踩的这个坑你得知道
前端·人工智能·后端
anOnion11 小时前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计