Echarts自定义工具栏toolbox

1.说明

toolbox:工具栏,提供操作图表的工具,可自定义

2.代码

//option
toolbox: {
  show: true,/*是否显示工具栏组件*/
  itemSize :30,/*工具栏 icon 的大小*/
  feature: {
  	/*自定义事件,注意:自定义事件必须以my开头*/
    myTool2: {
      show: true,
      title: '单机台设备状态查询',/*鼠标停留时的提示文字*/
      icon: 'image://../0IMG/tool.png',/*显示图标,必须以image://为开头显示后面是图表的路径*/
      /*点击时触发的事件*/
      onclick: function (){
              alert("点击了自定义事件");
          }
      }
  }
},

3.官方的一些自带配置

除了自定义,官方还配置了一些自带的工具,方便使用

//option
toolbox: {
   show: true,
   feature: {
     dataZoom: {
       yAxisIndex: 'none'
     },/*数据区域缩放。目前只支持直角坐标系的缩放*/
     dataView: { readOnly: false },/*数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新*/
     magicType: { type: ['line', 'bar'] },/*动态类型切换,比如把数据转换为条形图或柱形图*/
     restore: {},/*配置项还原*/
     saveAsImage: {}/*保存为图片*/
   }
 }

你可能感兴趣的:(Echarts笔记,echarts,javascript,ecmascript)