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

}

复制代码
}
相关推荐
dorisrv36 分钟前
优雅的React表单状态管理
前端
蓝瑟1 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
dorisrv1 小时前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱1 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
StarkCoder2 小时前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_2 小时前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端
电商API大数据接口开发Cris2 小时前
构建异步任务队列:高效批量化获取淘宝关键词搜索结果的实践
前端·数据挖掘·api
符方昊2 小时前
如何实现一个MCP服务器
前端
喝咖啡的女孩2 小时前
React useState 解读
前端
渴望成为python大神的前端小菜鸟2 小时前
浏览器及其他 面试题
前端·javascript·ajax·面试题·浏览器