echarts 增加x轴的缩放与滚动
创始人
2025-05-29 23:04:15
0

echarts 增加x轴的缩放与滚动

主要属性 dataZoom
`
let initDom = null
const initChart = () => {
let option = {}
if (powerDate.value.length && powerVal.value.length) {
option = {
// echarts 图的位置
grid: {
top: 40,
left: 45,
right: 40,
bottom: 40,
},
// 提示框
tooltip: {
trigger: ‘item’,
},
left: ‘right’,
top: ‘5%’,
show: true,
legend: {
show: true,
top: ‘0’,
right: ‘50%’,
textStyle: {
color: ‘#B6D3EB’,
},
},
xAxis: {
type: ‘category’,
boundaryGap: false,
data: powerDate.value, // x轴数据
axisLine: {
show: false, // 隐藏x轴线
},
axisTick: {
show: false, // 隐藏x轴刻度
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
fontSize: 16,
},
interval: ‘auto’,
},
},
yAxis: {
type: ‘value’,
axisLabel: {
show: true,
margin: 5,
textStyle: {
fontSize: 16,
},
},
splitLine: {
lineStyle: {
color: ‘#192B3C’,
type: ‘dashed’,
},
},
boundaryGap: [0, ‘100%’],
},
dataZoom: [
{
type: ‘inside’,
start: 0,
end: 30,
show: false, // 是否显示下面的滑动组件
},
{
start: 0,
end: 30,
show: false,
},
],
series: [
{
name: ‘右上角title’,
type: ‘line’,
symbolSize: 6, // 拐点大小
label: {
show: true,
position: ‘top’,
textStyle: {
color: ‘#fff’,
fontSize: 16,
},
},
data: [], // y轴数据
lineStyle: {
color: ‘#0099FF’,
},
markLine: {
data: xAxlist.length
? [
{
name: ‘标记线’,
yAxis: 1,
},
]
: [],
silent: true,
},
},
],
}
} else {
option = {
title: {
text: ‘暂无数据’,
x: ‘center’,
y: ‘center’,
textStyle: {
fontSize: ‘30px’,
fontWeight: ‘600’,
color: ‘#00cfff’,
},
},
}
}
nextTick(() => {
// 不要使用ref 包装echarts !!!
initDom = echarts.init(document.getElementById(‘consumptionEcharts’))
initDom.setOption(option, true)
})
}

相关内容

热门资讯

首创证券拟赴港上市,“A+H”... 首创证券在A股上市不足三年便启动赴港上市计划。近日,首创证券公告称,公司董事会已审议通过了公司拟发行...
肥东杨大爷要帮“儿子”还钱,银... “儿子”在外借了2万元还不上 “要债人”电话直接打了过来 还?还是不还? 7月6日 肥东县公安局梁园...
A股上周16家上市公司公布并购... 转自:扬子晚报 扬子晚报网7月27日讯(记者 范晓林 薄云峰)近段时间以来,A股市场并购重组活跃度持...
独家|某股份行改动零售业务关键... 在资产端信贷“投不动”(多家行零售信贷增速连续几个季度放缓、更有甚者个贷投放负增长)、负债端存款“定...
四川五日游报团指南及详细行程,... 四川,这片位于中国西南的神奇土地,以其独特的自然风光、丰富的文化遗产和诱人的美食而闻名遐迩。从成都的...
原创 中... 在2025年4月初,时任美国总统的特朗普正式启动了针对世界各国的关税战,旨在通过实施经济制裁来促进美...
牛市主升浪开启了?别急!珍惜布... 本周,A股市场上行,主要宽基指数都收获了或多或少的周涨幅,其中,科创50、微盘股涨幅居前。板块方面,...
公募二季报两大看点!港股配置逼... 本报(chinatimes.net.cn)记者栗鹏菲 叶青 北京报道 2025年公募基金二季报披露收...
长和出售港口磋商期或延长 随着可能出现的各方介入及交易结构变化,此次长和港口出售交易如继续进行,其复杂性会提升 文 |《财经》...
中航重机涨0.17%,成交额4... 来源:新浪证券-红岸工作室 7月25日,中航重机涨0.17%,成交额4.14亿元,换手率1.52%,...
重仓电子和新能源行业 【深圳商报讯】(记者 陈燕青)基金二季报出炉,公募二季度依然重仓电子、新能源、食品饮料等行业。公募排...
大婚之后,大笔减持!昔日全球首... 当地时间7月25日,亚马逊公司提交至美国证券交易委员会的文件显示,前全球首富、亚马逊创始人杰夫·贝索...
创源股份涨2.32%,成交额3... 来源:新浪证券-红岸工作室 7月25日,创源股份涨2.32%,成交额3.50亿元,换手率8.32%,...
筹备登陆韩国综合股价指数!大韩... 近日,大韩造船(Daehan Shipbuilding)的首次公开募股(IPO)发行价最终确定为每股...
山东政商要情(7.21—7.2... 记者 王惠 1,2025年上半年山东GDP50046亿元 增长5.6% 7月21日,山东省统计局、国...
《法学基本概念导论》| 专研法... 导言 本书是对权利、义务、法律主体、法律规范、法律渊源、法律行为等法学基本概念(juristic f...
上海AI新动向:世界AI合作组... 在今日的天气状况下,上海迎来了阴到多云的天气,偶尔还有阵雨光顾,气温徘徊在27至31摄氏度之间,给市...
山鹰国际跌1.52%,成交额2... 来源:新浪证券-红岸工作室 7月25日,山鹰国际跌1.52%,成交额2.50亿元,换手率2.33%,...
马斯克擎天柱解决不了无「手」难... 新智元报道 编辑:英智 【新智元导读】马斯克说人形机器人是特斯拉的未来,可今年5000台的目标才刚...
开封警方回应网传“释永信相关警... 7月27日,开封市公安局官方微博回复网友评论时表示:“(网传释永信相关)通报是假的,请不要再传播,目...