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

}

复制代码
}
相关推荐
pe7er15 小时前
引子
前端·后端·架构
恋猫de小郭15 小时前
CPF-Flutter 社区提出折叠场景分栏(平行视界) 方案
android·前端·flutter
aixingpan15 小时前
aixingpan.cn API开发文档:api_docs_trichart_natal_marx_transit2接口指南
前端·php
csj5015 小时前
前端基础之《React(13)—表单绑定、列表渲染》
前端·react.js
csj5015 小时前
前端基础之《React(12)—条件渲染》
前端·react.js
IT_陈寒15 小时前
Java序列化坑了我三天,原来问题出在这个默认方法
前端·人工智能·后端
雪芽蓝域zzs15 小时前
第四十八节:驾驶舱大屏进阶:数字滚动动画 + 渐变边框美化
前端·javascript·vue.js
ly768915 小时前
Spring Boot 3.2 虚拟线程在 Web 层与 JDBC 池的实践边界
前端·spring boot·后端·tomcat·jdbc·虚拟线程
Bingo_BIG15 小时前
LOV列表的查询
前端·javascript·lov
小静AI工程实验室15 小时前
JS 逆向接口 ID 变了?Python 与 Node.js 复现 JSON 大整数精度丢失
javascript·python·node.js