toolbox工具組件

工具欄:導出圖片缀雳,數(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)縮放的功能吝秕,定義一些指令的操作。 



                        }
                    ],
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末空幻,一起剝皮案震驚了整個濱河市烁峭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌秕铛,老刑警劉巖约郁,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異但两,居然都是意外死亡鬓梅,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門镜遣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來己肮,“玉大人士袄,你說我怎么就攤上這事悲关』哑В” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵寓辱,是天一觀的道長艘绍。 經(jīng)常有香客問我,道長秫筏,這世上最難降的妖魔是什么诱鞠? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮这敬,結果婚禮上航夺,老公的妹妹穿的比我還像新娘。我一直安慰自己崔涂,他們只是感情好阳掐,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著冷蚂,像睡著了一般缭保。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蝙茶,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天艺骂,我揣著相機與錄音,去河邊找鬼隆夯。 笑死钳恕,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蹄衷。 我是一名探鬼主播苞尝,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼宦芦!你這毒婦竟也來了宙址?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤调卑,失蹤者是張志新(化名)和其女友劉穎抡砂,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恬涧,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡注益,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了溯捆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丑搔。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡厦瓢,死狀恐怖,靈堂內的尸體忽然破棺而出啤月,到底是詐尸還是另有隱情,我是刑警寧澤浙垫,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布夹姥,位于F島的核電站辙诞,受9級特大地震影響,放射性物質發(fā)生泄漏飞涂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望泽西。 院中可真熱鬧,春花似錦陕见、人聲如沸味抖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽佩研。三九已至,卻和暖如春旬薯,著一層夾襖步出監(jiān)牢的瞬間适秩,已是汗流浹背绊序。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工骤公, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抚官,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓耗式,卻偏偏與公主長得像趁猴,于是被迫代替她去往敵國和親彪见。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容