var valueData = [
                {value: 33,name: '診所'},
                {value: 29,name: '汽車服務相關'},
                {value: 27, name: '洗衣店'},
                {value: 26,name: '中介機構'},
                {value: 22,name: '汽車維修'}
            ];
            var nameData = ['診所', '汽車服務相關', '洗衣店', '中介機構', '汽車維修'];
            var colorData = ['#A769EB', '#f69846', '#f6d54a', '#45dbf7', '#5AF6DE', '#89F6DC'];

            let Option2 = {
                backgroundColor: 'rgba(0,0,0,0)',
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {d}% <br/> {c}"
                },
                legend: {
                    // orient: 'vertical',
                    icon: 'circle',
                    bottom: 20,
                    x: 'center',
                    y: 'top',
                    data: nameData,
                    textStyle: {
                        color: '#fff'
                    }
                    //data: ['診所', '汽車服務相關', '洗衣店', '中介機構', '汽車維修', '火車站', '人流指數', '日式簡餐/快餐', 'ATM', '超市']
                },
                series: [{
                    type: 'pie',
                    // radius: ['20%', '40%'],
                    center: ['50%', '50%'],
                    left:70,
                    right:70,
                    color: colorData,
                    data: valueData,
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{c|{b}}\n{a|{d}}'+ '%',
                            rich: {
                                b: {
                                    fontSize: 12,
                                    color: '#12EABE',
                                    align: 'left',
                                    padding: 4
                                },
                                d: {
                                    
                                    fontSize: 12,
                                    align: 'left',
                                    padding: 2
                                },
                                c: {
                                    color: '#fff',
                                    fontSize: 12,
                                    align: 'left',
                                    padding: 2
                                }
                            }
                        }
                    }
                }]
            }
            var dom1 = document.getElementById("Box2");
            var myChart1 = echarts.init(dom1);
            let number = null //宣告一個變數稍後接扇區的dataIndex 
            myChart1.on('click', function(param) { //新增點選事件
                console.log(param );
                myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //啟用點選區域高亮
                if (param.dataIndex !== number) { // 當滑鼠點選的時候 消除上一個扇區的高亮
                    myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
                }
                number = param.dataIndex //接住當前扇區的dataIndex
            });
            myChart1.setOption(Option2)
            myChart1.dispatchAction({ type: 'highlight', dataIndex: 0 }); // 生成是預設第一條資料高亮