echarts的toolbox属性

有五个工具

toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
},

toolbox其他属性

toolbox={
	show:true,//是否显示工具栏
	orient:"horizontal",//工具栏icon的布局朝向‘horizontal’'vertical'
	itemSize:15,//工具栏icon的大小
	itemGap:10,//工具栏icon每项之间的间隔
	showTitle:true,//是否在鼠标hover的时候显示每个工具的icon标题
	feature:{
	
	//1、保存为图片
	saveAsImage :{
	show:true,//是否显示该工具
	type:"png",//保存的图片格式。支持 'png' 和 'jpeg'
	name:"xc",//保存文件的名称,默认使用title.text作为名称
	backgroundColor:"#fff", //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
	title:"保存为图片",
	pixelRatio:1, //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值
	},

	//2、 数据视图,可以展现当前图表所用的数据,编辑后可以动态更新
	dataView: {
	show: true,                         //是否显示该工具。
            title:"数据视图",
            readOnly: false,                    //是否不可编辑(只读)
            lang: ['数据视图', '关闭', '刷新'],  //数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']
            backgroundColor:"#fff",             //数据视图浮层背景色。
            textareaColor:"#fff",               //数据视图浮层文本输入区背景色
            textareaBorderColor:"#333",         //数据视图浮层文本输入区边框颜色
            textColor:"#000",                    //文本颜色。
            buttonColor:"#c23531",              //按钮颜色。
            buttonTextColor:"#fff",             //按钮文本颜色。
	},
	
	//3、重置
	restore: {
	show: true,//是否显示该工具。
	title:"还原",
	},
	
	// 4、区域缩放,目前只支持直角坐标系的缩放
	dataZoom: {
	 show: true,                         //是否显示该工具。
            title:"缩放",                       //缩放和还原的标题文本
            xAxisIndex:0,                       //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
            yAxisIndex:false,                   //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
	},
	
	//5、动态图表类型的切换
	magicType: { 
            show: true,
            title:"切换",                       //各个类型的标题文本,可以分别配置。
            type: ['line', 'bar'],              //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)
        },
	}
}

你可能感兴趣的:(echart,echarts,前端,javascript)