/*
title: Organ Data with SVG
category: map
titleCN: 内脏数据（SVG）
*/

$.get(ROOT_PATH + '/data/asset/geo/Veins_Medical_Diagram_clip_art.svg', function (svg) {

    echarts.registerMap('organ_diagram', {svg: svg});

    option = {
        tooltip: {
        },
        geo: {
            left: 10,
            right: '50%',
            map: 'organ_diagram',
            selectedMode: 'multiple',
            emphasis: {
                focus: 'self',
                itemStyle: {
                    color: null
                },
                label: {
                    position: 'bottom',
                    distance: 0,
                    textBorderColor: '#fff',
                    textBorderWidth: 2
                }
            },
            blur: {
            },
            select: {
                itemStyle: {
                    color: '#b50205'
                },
                label: {
                    show: false,
                    textBorderColor: '#fff',
                    textBorderWidth: 2
                }
            }
        },
        grid: {
            left: '60%',
            top: '20%',
            bottom: '20%'
        },
        xAxis: {},
        yAxis: {
            data: ['heart', 'large-intestine', 'small-intestine', 'spleen', 'kidney', 'lung', 'liver']
        },
        series: [{
            type: 'bar',
            emphasis: {
                focus: 'self'
            },
            data: [121, 321, 141, 52, 198, 289, 139]
        }]
    };

    myChart.setOption(option);

    myChart.on('mouseover', { seriesIndex: 0 }, function (event) {
        myChart.dispatchAction({
            type: 'highlight',
            geoIndex: 0,
            name: event.name
        });
    });
    myChart.on('mouseout', { seriesIndex: 0 }, function (event) {
        myChart.dispatchAction({
            type: 'downplay',
            geoIndex: 0,
            name: event.name
        });
    });

});