html修改柱状图大小,echarts图表大小随着窗口大小调整以及echarts图表的媒体查询...

主要是resize()方法;

基本使用方法(摘要):

this.echartsEle=document.getElementById('myEcharts')

this.echartsEle.resize();

let that= this

window.onresize = function() {

that.echartsEle.resize();

}

具体的使用根据具体情境自行封装;

等有空上自己做的demo

echarts图表的媒体查询:

参考文档:https://echarts.baidu.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94

官方文档摘要:

要在 option 中设置 Media Query 须遵循如下格式:

option = {

baseOption: { // 这里是基本的『原子option』。

title: {...},

legend: {...},

series: [{...}, {...}, ...],

...

},

media: [ // 这里定义了 media query 的逐条规则。

{

query: {...}, // 这里写规则。

option: { // 这里写此规则满足下的option。

legend: {...},

...

}

},

{

query: {...}, // 第二个规则。

option: { // 第二个规则对应的option。

legend: {...},

...

}

},

{ // 这条里没有写规则,表示『默认』,

option: { // 即所有规则都不满足时,采纳这个option。

legend: {...},

...

}

}

]

};

media的配置示例:

media: [

{

query: {

maxWidth: 500 // 当容器宽度小于 500 时。

},

option: {

legend: {

right: 10, // legend 放置在右侧中间。

top: '15%',

orient: 'vertical' // 纵向布局。

},

series: [ // 两个饼图上下布局。

{

radius: [20, '50%'],

center: ['50%', '30%']

},

{

radius: [30, '50%'],

center: ['50%', '75%']

}

]

}

},

...

]

有空上自己做的demo。

(注:更具体内容待补充;)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值