暂无数据

描述:当前是关于Echarts图表中的 散点图 示例。
 
            var data = [
    [4 + 10, 1+10],
    [12 + 10, 1+10],
    [4 + 10, 2+10],
    [5 + 10, 2+10],
    [6 + 10, 2+10],
    [7 + 10, 2+10],
    [8 + 10, 2+10],
    [9 + 10, 2+10],
    [10 + 10, 2+10],
    [11 + 10, 2+10],
    [12 + 10, 2+10],
    [4 + 10, 3+10],
    [12 + 10, 3+10],
    [4 + 10, 4+10],
    [5 + 10, 4+10],
    [6 + 10, 4+10],
    [7 + 10, 4+10],
    [8 + 10, 4+10],
    [9 + 10, 4+10],
    [10 + 10, 4+10],
    [11 + 10, 4+10],
    [12 + 10, 4+10],
    [4 + 10, 5+10],
    [12 + 10, 5+10],
    [4 + 10, 6+10],
    [5 + 10, 6+10],
    [6 + 10, 6+10],
    [7 + 10, 6+10],
    [8 + 10, 6+10],
    [9 + 10, 6+10],
    [10 + 10, 6+10],
    [11 + 10, 6+10],
    [12 + 10, 6+10],
    [13 + 10, 6+10],
    [12 + 10, 7+10],
    [5 + 10, 8+10],
    [7 + 10, 8+10],
    [12 + 10, 8+10],
    [5 + 10, 9+10],
    [8 + 10, 9+10],
    [12 + 10, 9+10],
    [1 + 10, 10+10],
    [2 + 10, 10+10],
    [3 + 10, 10+10],
    [4 + 10, 10+10],
    [5 + 10, 10+10],
    [6 + 10, 10+10],
    [7 + 10, 10+10],
    [9 + 10, 10+10],
    [12 + 10, 10+10],
    [5 + 10, 11+10],
    [9+10, 11+10],
    [12 + 10, 11+10],
    [2 + 10, 12+10],
    [3 + 10, 12+10],
    [4 + 10, 12+10],
    [5 + 10, 12+10],
    [6 + 10, 12+10],
    [7 + 10, 12+10],
    [9 + 10, 12+10],
    [10 + 10, 12+10],
    [11 + 10, 12+10],
    [12 + 10, 12+10],
    [13 + 10, 12+10],
    [14 + 10, 12+10],
    [15 + 10, 12+10],
    [3 + 10, 13+10],
    [4 + 10, 13+10],
    [5 + 10, 13+10],
    [9 + 10, 13+10],
    [14 + 10, 13+10],
    [4 + 10, 14+10],
    [9 + 10, 14+10],
    [2 + 10, 15+10],
    [3 + 10, 15+10],
    [4 + 10, 15+10],
    [5 + 10, 15+10],
    [6 + 10, 15+10],
    [7 + 10, 15+10],
    [9 + 10, 15+10],
    [10 + 10, 15+10],
    [11 + 10, 15+10],
    [12 + 10, 15+10],
    [4 + 10, 16+10],
    [13 + 10, 16+10],
    [14 + 10, 16+10]
];

var data2 = [
    [2+30, 1+10],
    [3+30, 2+10],
    [10+30, 2+10],
    [11+30, 2+10],
    [12+30, 2+10],
    [13+30, 2+10],
    [14+30, 2+10],
    [15+30, 2+10],
    [4+30, 3+10],
    [9+30, 3+10],
    [15+30, 3+10],
    [5+30, 4+10],
    [9+30, 4+10],
    [15+30, 4+10],
    [5+30, 5+10],
    [9+30, 5+10],
    [6+30, 6+10],
    [9+30, 6+10],
    [6+30, 7+10],
    [9+30, 7+10],
    [7+30, 8+10],
    [9+30, 8+10],
    [7+30, 9+10],
    [9+30, 9+10],
    [2+30, 10+10],
    [3+30, 10+10],
    [4+30, 10+10],
    [5+30, 10+10],
    [6+30, 10+10],
    [7+30, 10+10],
    [8+30, 10+10],
    [9+30, 10+10],
    [10+30, 10+10],
    [11+30, 10+10],
    [12+30, 10+10],
    [13+30, 10+10],
    [14+30, 10+10],
    [7+30, 11+10],
    [13+30, 11+10],
    [7+30, 12+10],
    [7+30, 13+10],
    [7+30, 14+10],
    [3+30, 15+10],
    [4+30, 15+10],
    [5+30, 15+10],
    [6+30, 15+10],
    [7+30, 15+10],
    [8+30, 15+10],
    [9+30, 15+10],
    [10+30, 15+10],
    [11+30, 15+10],
    [12+30, 15+10],
    [11+30, 16+10]
];

var data3 = [
    [2+55, 1+10],
    [7+55, 1+10],
    [14+55, 1+10],
    [3+55, 2+10],
    [6+55, 2+10],
    [8+55, 2+10],
    [13+55, 2+10],
    [14+55, 2+10],
    [15+55, 2+10],
    [4+55, 3+10],
    [5+55, 3+10],
    [9+55, 3+10],
    [13+55, 3+10],
    [4+55, 4+10],
    [6+55, 4+10],
    [10+55, 4+10],
    [12+55, 4+10],
    [3+55, 5+10],
    [7+55, 5+10],
    [11+55, 5+10],
    [3+55, 6+10],
    [7+55, 6+10],
    [10+55, 6+10],
    [12+55, 6+10],
    [1+55, 7+10],
    [2+55, 7+10],
    [3+55, 7+10],
    [4+55, 7+10],
    [5+55, 7+10],
    [6+55, 7+10],
    [7+55, 7+10],
    [9+55, 7+10],
    [12+55, 7+10],
    [4+55, 8+10],
    [9+55, 8+10],
    [13+55, 8+10],
    [2+55, 9+10],
    [5+55, 9+10],
    [7+55, 9+10],
    [9+55, 9+10],
    [13+55, 9+10],
    [3+55, 10+10],
    [5+55, 10+10],
    [6+55, 10+10],
    [9+55, 10+10],
    [13+55, 10+10],
    [4+55, 11+10],
    [5+55, 11+10],
    [8+55, 11+10],
    [13+55, 11+10],
    [1+55, 12+10],
    [2+55, 12+10],
    [3+55, 12+10],
    [4+55, 12+10],
    [5+55, 12+10],
    [6+55, 12+10],
    [7+55, 12+10],
    [8+55, 12+10],
    [9+55, 12+10],
    [10+55, 12+10],
    [11+55, 12+10],
    [12+55, 12+10],
    [13+55, 12+10],
    [14+55, 12+10],
    [15+55, 12+10],
    [5+55, 13+10],
    [9+55, 13+10],
    [14+55, 13+10],
    [3+55, 14+10],
    [5+55, 14+10],
    [7+55, 14+10],
    [10+55, 14+10],
    [2+55, 15+10],
    [5+55, 15+10],
    [8+55, 15+10],
    [10+55, 15+10],
    [5+55, 16+10],
    [10+55, 16+10]
];

var data4 = [
    [3+80, 1+10],
    [8+80, 1+10],
    [14+80, 1+10],
    [2+80, 2+10],
    [4+80, 2+10],
    [5+80, 2+10],
    [8+80, 2+10],
    [9+80, 2+10],
    [10+80, 2+10],
    [11+80, 2+10],
    [12+80, 2+10],
    [13+80, 2+10],
    [14+80, 2+10],
    [4+80, 3+10],
    [6+80, 3+10],
    [8+80, 3+10],
    [14+80, 3+10],
    [4+80, 4+10],
    [6+80, 4+10],
    [8+80, 4+10],
    [14+80, 4+10],
    [4+80, 5+10],
    [6+80, 5+10],
    [8+80, 5+10],
    [14+80, 5+10],
    [4+80, 6+10],
    [7+80, 6+10],
    [8+80, 6+10],
    [9+80, 6+10],
    [10+80, 6+10],
    [11+80, 6+10],
    [12+80, 6+10],
    [13+80, 6+10],
    [14+80, 6+10],
    [15+80, 6+10],
    [1+80, 7+10],
    [2+80, 7+10],
    [4+80, 7+10],
    [7+80, 7+10],
    [11+80, 7+10],
    [14+80, 7+10],
    [3+80, 8+10],
    [4+80, 8+10],
    [7+80, 8+10],
    [11+80, 8+10],
    [4+80, 9+10],
    [5+80, 9+10],
    [7+80,9+10],
    [8+80, 9+10],
    [9+80, 9+10],
    [10+80, 9+10],
    [11+80, 9+10],
    [12+80, 9+10],
    [13+80, 9+10],
    [14+80, 9+10],
    [15+80, 9+10],
    [4+80, 10+10],
    [6+80, 10+10],
    [7+80, 10+10],
    [11+80, 10+10],
    [14+80, 10+10],
    [4+80, 11+10],
    [7+80, 11+10],
    [11+80, 11+10],
    [1+80, 12+10],
    [2+80, 12+10],
    [3+80, 12+10],
    [4+80, 12+10],
    [5+80, 12+10],
    [6+80, 12+10],
    [7+80, 12+10],
    [8+80, 12+10],
    [9+80, 12+10],
    [10+80, 12+10],
    [11+80, 12+10],
    [12+80, 12+10],
    [13+80, 12+10],
    [14+80, 12+10],
    [4+80, 13+10],
    [7+80, 13+10],
    [14+80, 13+10],
    [4+80, 14+10],
    [7+80, 14+10],
    [14+80, 14+10],
    [4+80, 15+10],
    [7+80, 15+10],
    [8+80, 15+10],
    [9+80, 15+10],
    [10+80, 15+10],
    [11+80, 15+10],
    [12+80, 15+10],
    [13+80, 15+10],
    [14+80, 15+10],
    [15+80, 15+10],
    [4+80, 16+10],
    [14+80, 16+10]
];
var chartData = [{
    value: data
}, {
    value: data2
}, {
    value: data3
}, {
    value: data4
}]

var color = "#189cbb";
var scale = 1; //缩放

option = {
    color: ['#e8b828', '#1c95b4'],
    backgroundColor: '#031f2d',
    legend: {
        orient: 'horizontal',
        // orient: 'vertical',
        // x: 'right',
        right: '9%',
        y: 'top',
        itemWidth: 15 * scale, // 图例图形宽度
        itemHeight: 15 * scale, // 图例图形高度
        itemGap: 30 * scale,
        icon: 'roundRect',
        selectedMode: true,
        textStyle: {
            color: '#fff', // 图例文字颜色
            fontSize: 13 * scale,
        },
        data: ['暂', '无', '数', '据']
    },
    // backgroundColor: '#3c4656',
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        max:100,
        axisLabel: {
            textStyle: {
                color: color,
                fontSize: 13 * scale,
            }
        },
        axisTick: {
            lineStyle: {
                color: color,
            }
        },
        axisLine: {
            lineStyle: {
                color: color,
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(80,224,255,0.3)',
                type: 'dashed'
            }
        },
    },
    yAxis: {
        axisLabel: {
            textStyle: {
                color: color,
                fontSize: 13 * scale,
            }
        },
        axisTick: {
            lineStyle: {
                color: color,
            }
        },
        axisLine: {
            lineStyle: {
                color: color,
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(80,224,255,0.3)',
                type: 'dashed'
            }
        },
        nameTextStyle: {
            color: color,
            fontSize: 13 * scale,
            padding: [0, 0, 20, 0]
        },
    },
    visualMap: {
        show: false,
        max: 150,
        inRange: {
            symbolSize: [14 * scale, 14 * scale]
        }
    },
    series: [{
        name: '暂',
        type: 'scatter',
        data: chartData[0].value,
        symbolSize: 20
    }, {
        name: '无',
        type: 'scatter',
        data: chartData[1].value,
        symbolSize: 30
    }, {
        name: '数',
        type: 'scatter',
        data: chartData[2].value,
        symbolSize: 30
    }, {
        name: '据',
        type: 'scatter',
        data: chartData[3].value,
        symbolSize: 30
    }],
    animationDelay: function(idx) {
        return idx * 50;
    },
    animationEasing: 'elasticOut'
};