• dataView 工具栏


    option = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['最高','最低']
        },
        toolbox: {
            show : true,
            orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                                       // 'horizontal' ¦ 'vertical'
            x: 'right',                // 水平安放位置,默认为全图右对齐,可选为:
                                       // 'center' ¦ 'left' ¦ 'right'
                                       // ¦ {number}(x坐标,单位px)
            y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                       // 'top' ¦ 'bottom' ¦ 'center'
                                       // ¦ {number}(y坐标,单位px)
            color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
            backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
            borderColor: '#ccc',       // 工具箱边框颜色
            borderWidth: 0,            // 工具箱边框线宽,单位px,默认为0(无边框)
            padding: 5,                // 工具箱内边距,单位px,默认各方向内边距为5,
            showTitle: true,
            feature : {
                mark : {
                    show : true,
                    title : {
                        mark : '辅助线-开关',
                        markUndo : '辅助线-删除',
                        markClear : '辅助线-清空'
                    },
                    lineStyle : {
                        width : 1,
                        color : '#1e90ff',
                        type : 'dashed'
                    }
                },
                dataZoom : {
                    show : true,
                    title : {
                        dataZoom : '区域缩放',
                        dataZoomReset : '区域缩放-后退'
                    }
                },
                dataView : {
                    show : true,
                    title : '数据视图',
                    readOnly: true,
                    lang : ['数据视图', '关闭', '刷新'],
                    optionToContent: function(opt) {
                        var axisData = opt.xAxis[0].data;
                        var series = opt.series;
                        var table = '<table style="100%;text-align:center"><tbody><tr>'
                                     + '<td>时间</td>'
                                     + '<td>' + series[0].name + '</td>'
                                     + '<td>' + series[1].name + '</td>'
                                     + '</tr>';
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            table += '<tr>'
                                     + '<td>' + axisData[i] + '</td>'
                                     + '<td>' + series[0].data[i] + '</td>'
                                     + '<td>' + series[1].data[i] + '</td>'
                                     + '</tr>';
                        }
                        table += '</tbody></table>';
                        return table;
                    }
                },
                magicType: {
                    show : true,
                    title : {
                        line : '动态类型切换-折线图',
                        bar : '动态类型切换-柱形图',
                        stack : '动态类型切换-堆积',
                        tiled : '动态类型切换-平铺'
                    },
                    type : ['line', 'bar', 'stack', 'tiled']
                },
                restore : {
                    show : true,
                    title : '还原',
                    color : 'black'
                },
                saveAsImage : {
                    show : true,
                    title : '保存为图片',
                    type : 'jpeg',
                    lang : ['点击本地保存'] 
                },
                myTool : {
                    show : true,
                    title : '自定义扩展方法',
                    icon : 'image://../asset/ico/favicon.png',
                    onclick : function (){
                        alert('myToolHandler')
                    }
                }
            }
        },
        calculable : true,
        dataZoom : {
            show : true,
            realtime : true,
            start : 20,
            end : 80
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : function (){
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push('2013-03-' + i);
                    }
                    return list;
                }()
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'最高',
                type:'line',
                data:function (){
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(Math.round(Math.random()* 30));
                    }
                    return list;
                }()
            },
            {
                name:'最低',
                type:'line',
                data:function (){
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(Math.round(Math.random()* 10));
                    }
                    return list;
                }()
            }
        ]
    };
                        

    http://echarts.baidu.com/echarts2/doc/example/toolbox.html 

  • 相关阅读:
    online_judge_1489
    MybatisPlus 快速开始
    Markdown 基本语法
    python2与python3的区别(1)
    这是我的第一篇博客
    vue 渲染函数&jsx
    计算机进行小数运算出错的原因0.2 + 0.1 = 0.30000000000000004
    最流行的高级语言
    v-cli脚手架
    vue mixins组件复用的几种方式
  • 原文地址:https://www.cnblogs.com/pureEve/p/6525451.html
Copyright © 2020-2023  润新知