工具欄：導出圖片缀雳，數(shù)據(jù)視圖，動態(tài)類型切換，數(shù)據(jù)區(qū)域縮放撇他，重置等5個工具。其實還可以擴展更多狈蚤，只要用js操作上面setOptionsli里面?zhèn)魅氲膮?shù)即可
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,
//是否為不可編輯（只讀）.轉為文字之后可以改變數(shù)值立即顯示脆侮。
// show:false,
title:'轉為文字描述',
// icon:'',
// 配置自定義的icon
// iconStyle:{
// },
// optionToContent:function(){
// // 自定義展現(xiàn)函數(shù)锌畸，可以返回dom或者html字符串。
// },
lang:['數(shù)據(jù)視圖','利巴特爾'],
// 文字描述的文字選項
backgroundColor:'#fff',
textareaColor:'red',
// 一些設置文字樣式的配置選項靖避。
buttonColor:'red',
buttonTextColor:'yellow',
},
// 數(shù)據(jù)視圖工具潭枣，展現(xiàn)當前圖標所用的數(shù)據(jù)
magicType: {
type: ['line', 'bar','tiled','stack'],
// 折線，柱狀幻捏，平鋪盆犁，堆疊
// 好像這個除了這里有選項切換顯示，還要有數(shù)據(jù)支持
// title:[]
// 每個類型的標題文本
// icon:
// 每個類型的icon path:分別設置不同的icon
// iconStyle
// 動態(tài)切換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:{
// 數(shù)據(jù)陰影的樣式
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,
// 小數(shù)點后面加幾位
// labelFormatter:function(value){
// return '<---'+value+'--->'
// },
// 格式化label顯示的字符串
// showDetail:true,
//拖拽的時候不顯示詳細細節(jié)
showDataShadow:true,
realtime:true,
// 是否實時更新系列的視圖
// textStyle:{
// // 和文字有關的樣式配置選項
// },
// xAxisIndex: [0, 2]
// 標識這個dataZoom組件控制第一和第三個xAxis 笙蒙，但是實際使用會報錯，看下什么問題庆锦。
minSpan:'10',
// 限制窗口的最小值捅位。
maxSpan:'50',
// 限制窗口的最大值
// orient:'vertial',
// 組件的排列方式
// zoomLock:true,
// 是否鎖定窗口，鎖定窗口之后搂抒，只能平移艇搀，不能進行縮放。
// throttle:20,
// 觸發(fā)視圖刷新的頻率
// 還有一些調整位置的樣式
// top:10
},{
// 內置在坐標系內求晶，可以在坐標系的圖內焰雕，進行平移和縮放，包括pc端芳杏，包括移動端矩屁，以及鼠標進行操作,還會和上一個有聯(lián)動效果。
type:'inside',
// 只需要這么簡單的一個參數(shù)的傳入爵赵，
//還有一些是用來輔助實現(xiàn)縮放的功能吝秕，定義一些指令的操作。
}
],
