工具栏：导出图片，数据视图，动态类型切换，数据区域缩放，重置等5个工具。其实还可以扩展更多，只要用js操作上面setOptionsli里面传入的参数即可
toolbox: {
show: true,
// orient:'vertical',
// icon排向
itemSize:'20',
// icon大小
// itemGap:'10',
// icon间距
// showTitle:false,
// 是否在hover的时候显示icon的标题
iconStyle:{
color:{
// color的样式，包括各种渐变
},
borderColor:'red',
// 图形描边
borderWidth:2,
// borderType:'dashed',
// 跟描边有关的样式
textPosition:'top',
// 文本的位置
textAlign:'left',
emphasis:{
// hover的时候的样式设置
}
},
left:'10',
// 距离左侧的距离
width:'400',
// 工具栏组件的宽度，默认自适应
feature: {
// 工具配置项
dataZoom:[
{
type:'slider',
show:false
}
],
dataView: {
readOnly: false,
//是否为不可编辑（只读）.转为文字之后可以改变数值立即显示。
// show:false,
title:'转为文字描述',
// icon:'',
// 配置自定义的icon
// iconStyle:{
// },
// optionToContent:function(){
// // 自定义展现函数，可以返回dom或者html字符串。
// },
lang:['数据视图','利巴特尔'],
// 文字描述的文字选项
backgroundColor:'#fff',
textareaColor:'red',
// 一些设置文字样式的配置选项。
buttonColor:'red',
buttonTextColor:'yellow',
},
// 数据视图工具，展现当前图标所用的数据
magicType: {
type: ['line', 'bar','tiled','stack'],
// 折线，柱状，平铺，堆叠
// 好像这个除了这里有选项切换显示，还要有数据支持
// title:[]
// 每个类型的标题文本
// icon:
// 每个类型的icon path:分别设置不同的icon
// iconStyle
// 动态切换icon样式设置
// emphasis
// hover的时候icon样式
},
// 类型转换
restore: {
// show:false,
title:'初始化',
iconStyle:{
// 设置这个icon的样式
},
emphasis:{
// hover的时候的样式
},
},
// 配置项还原
saveAsImage: {
type:'png',
// 这个是怎么做到的。
name:'saveImg',
// 保存文件的名字
backgroundColor:'red',
excludeComponents:['toolbox'],
// 保存为图片时要忽略的工具栏
// show:false,
// 是否显示该工具
iconStyle:{
},
// 保存为图片的时候，图标的样式。
pixeRatio:2,
// 保存图片的分辨率。
},
// 保存为图片
brush:{
type:['lineX'],
// icon:
// 设置icon的样式
// title
// 设置标题的名称
},
// 自定义工具按钮
// myTool1:{
// // 自定义工具的名字，只能以my开头
// show:true,
// title:'方法1',
// icon:"",
// onclick:function(){
// console.log('f')
// }
// }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
},
}
1 .dataZoom的组件的使用在toolbox外面，和series是同一级别。
2 .
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0, // 左边在 10% 的位置。
end: 10, // 右边在 60% 的位置。
// backgroundColor:'green', //组件的背景颜色
dataBackground:{
// 数据阴影的样式
lineStyle:{
// 阴影的线条样式
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
width:2, //线宽
type:'solid',
// 以及其他的一些和文字阴影有关的样式设置方法
},
areaStyle:{
//阴影样式
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
// 还有一些设置阴影样式的配置选项
}
},
fillerColor:'yellow', //选中范围的填充颜色
borderColor:'yellow', //边框颜色
},
handleIcon:'M1.0,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V39.4z M9.7,19.1H4.8v-1.4h4.9V19.1z',
// 手柄icon显示,左右两边的样式，此处是可以自定义的。
handleSize:'100%',
handleStyle:{
// 跟他的一些相关样式。
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
// borderColor:'',
// borderWidth:'',
// borderType:'',
// 和阴影有关的样式
},
labelPrecision:1,
// 小数点后面加几位
// labelFormatter:function(value){
// return '<---'+value+'--->'
// },
// 格式化label显示的字符串
// showDetail:true,
//拖拽的时候不显示详细细节
showDataShadow:true,
realtime:true,
// 是否实时更新系列的视图
// textStyle:{
// // 和文字有关的样式配置选项
// },
// xAxisIndex: [0, 2]
// 标识这个dataZoom组件控制第一和第三个xAxis ，但是实际使用会报错，看下什么问题。
minSpan:'10',
// 限制窗口的最小值。
maxSpan:'50',
// 限制窗口的最大值
// orient:'vertial',
// 组件的排列方式
// zoomLock:true,
// 是否锁定窗口，锁定窗口之后，只能平移，不能进行缩放。
// throttle:20,
// 触发视图刷新的频率
// 还有一些调整位置的样式
// top:10
},{
// 内置在坐标系内，可以在坐标系的图内，进行平移和缩放，包括pc端，包括移动端，以及鼠标进行操作,还会和上一个有联动效果。
type:'inside',
// 只需要这么简单的一个参数的传入，
//还有一些是用来辅助实现缩放的功能，定义一些指令的操作。
}
],
