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 分钟前
🔥《刚刚问世》系列初窥篇-Java+Playwright自动化测试-32- 操作日历时间控件-下篇(详细教程)
java·前端·面试
王维志6 分钟前
⏱ TimeSpan:C#时间间隔结构
前端·后端·c#·.net
阿幸软件杂货间14 分钟前
【最新版】Edge浏览器(官方版)安装包_Edge浏览器(官方版)安装教程
前端·edge
RaidenLiu22 分钟前
Flutter 状态管理:Provider 入门与实战
前端·flutter
隔壁老王z27 分钟前
设计实现一个Web 终端:基于 Vue 3 和 Xterm.js 的实践
前端·iterm
中微子28 分钟前
简单介绍跨域资源共享(CORS)
前端
極光未晚31 分钟前
Vue 项目 webpack 打包体积分析:从 “盲猜优化” 到 “精准瘦身”
前端·vue.js·性能优化
刘小筛38 分钟前
Ant Design Vue (2x) 按钮(button)单击后离开,按钮状态无变化
前端
mogullzr41 分钟前
4.1.ByteOJ用户模块——登录注册功能(RSA + TimeStamp加密过)
前端·后端
鹏多多.42 分钟前
flutter-使用AnimatedDefaultTextStyle实现文本动画
android·前端·css·flutter·ios·html5·web