echarts之toolbox-x,y

本文介绍了ECharts中工具箱的布局配置方法,包括水平和垂直位置设置。通过不同的x和y属性值,可以实现toolbox在图表上的精确定位。

toolbox是echarts中的工具箱

名称类型默认值可选值效果
xstring | number‘right’‘center’ | ‘left’ | ‘right’ | {number}(x坐标,单位px)水平安放位置,当’center’时为中间,’left’ 时为左边,’right’时为右边,当为数字时为距离最左边的距离
ystring | number‘top’‘top’ | ‘bottom’ | ‘center’ {number}(y坐标,单位px)垂直安放位置,当’top’时为置顶,’center’ 时为中间,’bottom’时为底部,当为数字时为距离顶部的距离

当x,y分别取’left’,’center’时

    toolbox: {
        show : true,
        x:'left',
        y:'center'
    }

效果图如下:
当x,y分别取'left','center'时

当x,y分别取数字时

    toolbox: {
        show : true,
        x:100,
        y:300
    }

效果图如下:
当x,y分别取数字时

### 如何在 ECharts 中设置一个 X 轴对应多个 Y 轴系列 为了在一个图表中展示同一 X 轴下不同类型的 Y 轴数据,可以利用 `ECharts` 的多 y 轴特性来实现。这涉及到配置多个 yAxis 对象,并为不同的 series 指定对应的 y 轴索引。 #### 配置多项 Y 轴 创建多个 y 轴对象时,可以通过调整各自的位置(left 或 right)、名称、最小最大范围等参数来自定义每个 y 轴的表现形式[^1]: ```javascript option = { xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}, yAxis: [ {name: 'Y Axis 1', type: 'value'}, {name: 'Y Axis 2', type: 'value'} ], }; ``` #### 定义 Series 并关联到特定的 Y 轴 对于每一个要绘制的数据序列 (series),都需要指明它应该绑定哪一个 y 轴实例。这是通过给 series 添加 `yAxisIndex` 属性完成的,该属性接收整数表示第几个 y 轴(从0开始计数): ```javascript series: [ { name: 'Series A', type: 'line', data: [120, 132, 101, 134, 90, 230, 210], yAxisIndex: 0 // 绑定第一个 y 轴 }, { name: 'Series B', type: 'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6], yAxisIndex: 1 // 绑定第二个 y 轴 } ] ``` #### 整合完整的选项配置 最后一步就是把所有的组件组合起来形成最终的 option 结构体,这样就可以渲染出带有两个独立 y 轴坐标的复合型折线加柱状混合图了[^2]。 ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: 'Multiple Y-Axis Example' }, tooltip: { trigger: 'axis' }, legend: { data:['Series A','Series B'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis : [ { type : 'category', boundaryGap : false, data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis : [ { type : 'value', name : 'Value Scale 1' }, { type : 'value', name : 'Value Scale 2', min: 0, max: 200, position: 'right', offset: 80 } ], series : [ { name:'Series A', type:'line', data:[120, 132, 101, 134, 90, 230, 210], yAxisIndex: 0 }, { name:'Series B', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6], yAxisIndex: 1 } ] }; if (option && typeof option === "object") { myChart.setOption(option); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值