1. 程式人生 > >ECharts圖表外掛禁止拖動合併

ECharts圖表外掛禁止拖動合併

    ECharts是一個圖表類JS外掛,地址:http://echarts.baidu.com/index.html

    學習和使用起來都比較方便,最近使用的時候發現,ECharts雖然自帶的有拖拽合併的功能,但在某些時候,並不想讓生成的圖表具有這個功能,於是可以使用下列的方法來禁用:calculable : false,

    在程式碼中展示為:

//  echart
        // 路徑配置
        require.config({
            paths: {
                echarts: '../../script/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie',
            ],
            function (ec) {
                // 基於準備好的dom,初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));
                
                var dataStyle = {
                    normal: {
                        label: {show:false},
                        labelLine: {show:false}
                    }
                };
                var placeHolderStyle = {
                    normal : {
                        color: 'rgba(0,0,0,0)',
                        label: {show:false},
                        labelLine: {show:false}
                    },
                    emphasis : {
                        color: 'rgba(0,0,0,0)'
                    }
                };
                option = {

                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'horizontal',
                    itemGap:20,
                     y : 40,
                     textStyle:{"color": "auto",fontSize:14,},
                    data:['亂停亂放','暴露垃圾','黑車拉客','綠地不潔','小廣告','出店經營']
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : false,


                series : [
                    {
                        name:'報事彙總',
                        type:'pie',
                        clockWise:false,
                        radius : '55%',
                        center: ['50%', '50%'],
                        itemStyle : dataStyle,
                        data:[
                            {value:1, name:'亂停亂放'},
                            {value:1, name:'暴露垃圾'},
                            {value:1, name:'黑車拉客'},
                            {value:1, name:'綠地不潔'},
                            {value:11, name:'小廣告'},
                            {value:1, name:'出店經營'}
                              
                        ]
                    }
                ]
            };
        
                // 為echarts物件載入資料
                myChart.setOption(option);
            }
        );