myEcharts.js

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title : {
        text: '某地區蒸發量和降水量',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸發量','降水量']
    },
    toolbox: {
        padding:30,
        show : true
 
,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true},
            //敲黑板，重點！！！
            myTool2:{//自定義按鈕 danielinbiti,這裡增加，selfbuttons可以隨便取名字    
 

                   show:true,//是否顯示    
                   title:'檢視全部', //滑鼠移動上去顯示的文字    
                   icon:'path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z'
 
, //圖示    
                  onclick:function() {//點選事件,這裡的option1是chart的option資訊    
                           $('.big').css('display','block');
                         }    
                   }
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }/*雙y軸,
        {
            type: 'value',
            name: '溫度',
            min: 0,
            max: 210,
            interval: 30,
            axisLabel: {
                formatter: '{value} °C'
            }
        }*/
    ],
    grid:{
        top:'80',/*標題與柱狀圖的距離*/
    },
    series : [
        {
            name:'蒸發量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
myChart.setOption(option);

//變大的echarts
var myChart2 = echarts.init(document.getElementById('main2'));
var option2 = {
    title : {
        text: '某地區蒸發量和降水量',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸發量','降水量']
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }/*雙y軸,
        {
            type: 'value',
            name: '溫度',
            min: 0,
            max: 210,
            interval: 30,
            axisLabel: {
                formatter: '{value} °C'
            }
        }*/
    ],
    grid:{
        top:'80',/*標題與柱狀圖的距離*/
    },
    series : [
        {
            name:'蒸發量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
myChart2.setOption(option2);

css

.big{ /*變大後的樣式*/
                top: 5px;
                margin-top: 10px;
                margin:0 auto;
                height: 700px;width:100%;
                z-index:998;
                display:none;
                background-color:whitesmoke ;
                position: absolute;
                }
            .btn{ /*關閉按鈕*/
                margin:0 auto; 
                width: 30px;
                font-size: 12px; 
                border-radius: 3px;  /*圓角*/
                background-color: rgb(194, 53, 49); 
                }               

html

<!-- 原圖 -->
        <div id="main" style="margin:0 auto;height: 500px;width: 600px;"></div>
        <!-- 變大的div -->
        <div class="big">
            <div id="main2" style="margin:0 auto;height: 700px;width: 800px;"></div>
            <div class="btn" onclick="btn1Close()" >關閉</div>
        </div>

需要引入的檔案

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="myEcharts.js" type="text/javascript" charset="utf-8"></script>
        //關閉按鈕事件
        <script type="text/javascript">
            function btn1Close(){
                $(".big").css('display','none');
            }
        </script>

效果圖：

圖示是svg格式，用記事本開啟path標籤裡面的d