Solar Panel Grid View

描述:当前是关于Echarts图表中的 散点图 示例。
 
             

option = {
    xAxis: {show:false},
    yAxis: {show:false},
    legend: {
        bottom: 0,
        data: [{
            name: 'normal',
            icon: 'path://M295.828,362.626h237.418l-91.7-274.412H91.688L0,362.626h226.331v52.512h-67.108v29.894h191.674v-29.894h-55.069V362.626z M272.602,219.815V112.129h74.021l18.706,107.686H272.602z M367.408,231.772l18.566,106.939H272.613V231.772H367.408z M260.645,219.815h-90.41l19.36-107.686h71.038v107.686H260.645z M260.645,231.772v106.939H148.859l19.227-106.939H260.645z M398.107,338.712l-18.566-106.939h84.752l35.721,106.939H398.107z M460.312,219.815h-82.838l-18.707-107.686h65.556 L460.312,219.815z M108.918,112.129h68.527L158.09,219.815H72.941L108.918,112.129z M68.947,231.772h86.988l-19.226,106.939H33.204 L68.947,231.772z',
        },
        {
            name: 'abnormal',
            icon: 'path://M295.828,362.626h237.418l-91.7-274.412H91.688L0,362.626h226.331v52.512h-67.108v29.894h191.674v-29.894h-55.069V362.626z M272.602,219.815V112.129h74.021l18.706,107.686H272.602z M367.408,231.772l18.566,106.939H272.613V231.772H367.408z M260.645,219.815h-90.41l19.36-107.686h71.038v107.686H260.645z M260.645,231.772v106.939H148.859l19.227-106.939H260.645z M398.107,338.712l-18.566-106.939h84.752l35.721,106.939H398.107z M460.312,219.815h-82.838l-18.707-107.686h65.556 L460.312,219.815z M108.918,112.129h68.527L158.09,219.815H72.941L108.918,112.129z M68.947,231.772h86.988l-19.226,106.939H33.204 L68.947,231.772z',
        }
        ]
    },
    series: [{
        type: 'scatter',
        name: 'normal',
        symbol: 'path://M295.828,362.626h237.418l-91.7-274.412H91.688L0,362.626h226.331v52.512h-67.108v29.894h191.674v-29.894h-55.069V362.626z M272.602,219.815V112.129h74.021l18.706,107.686H272.602z M367.408,231.772l18.566,106.939H272.613V231.772H367.408z M260.645,219.815h-90.41l19.36-107.686h71.038v107.686H260.645z M260.645,231.772v106.939H148.859l19.227-106.939H260.645z M398.107,338.712l-18.566-106.939h84.752l35.721,106.939H398.107z M460.312,219.815h-82.838l-18.707-107.686h65.556 L460.312,219.815z M108.918,112.129h68.527L158.09,219.815H72.941L108.918,112.129z M68.947,231.772h86.988l-19.226,106.939H33.204 L68.947,231.772z',
        symbolSize: [100, 50],
        label: {
            show:true,
            formatter: 'SP-{@[1]}{@[0]}',
            color:'#000',
            position:'bottom'
        },
        itemStyle: {
            color: (params) => params.data[2]
        },
        data:[
                [0, 4, '#00FF00'],[1, 4, '#00FF00'],[2, 4, '#00FF00'],[3, 4, '#00FF00'],[4, 4, '#00FF00'],
                [0, 3, '#00FF00'],                  [2, 3, '#00FF00'],[3, 3, '#00FF00'],[4, 3, '#00FF00'],
                [0, 2, '#00FF00'],[1, 2, '#00FF00'],[2, 2, '#00FF00'],[3, 2, '#00FF00'],[4, 2, '#00FF00'],
                [0, 1, '#00FF00'],[1, 1, '#00FF00'],[2, 1, '#00FF00'],                  [4, 1, '#00FF00'],
                [0, 0, '#00FF00'],                  [2, 0, '#00FF00'],[3, 0, '#00FF00'],[4, 0, '#00FF00'],
        ]
    },
    {
        type: 'scatter',
        name: 'abnormal',
        symbol: 'path://M295.828,362.626h237.418l-91.7-274.412H91.688L0,362.626h226.331v52.512h-67.108v29.894h191.674v-29.894h-55.069V362.626z M272.602,219.815V112.129h74.021l18.706,107.686H272.602z M367.408,231.772l18.566,106.939H272.613V231.772H367.408z M260.645,219.815h-90.41l19.36-107.686h71.038v107.686H260.645z M260.645,231.772v106.939H148.859l19.227-106.939H260.645z M398.107,338.712l-18.566-106.939h84.752l35.721,106.939H398.107z M460.312,219.815h-82.838l-18.707-107.686h65.556 L460.312,219.815z M108.918,112.129h68.527L158.09,219.815H72.941L108.918,112.129z M68.947,231.772h86.988l-19.226,106.939H33.204 L68.947,231.772z',
        symbolSize: [100, 50],
        label: {
            show:true,
            formatter: 'SP-{@[1]}{@[0]}',
            color:'#000',
            position:'bottom'
        },        itemStyle: {
            color: (params) => params.data[2]
        },
        data:[
                [1, 3, '#FF0000'],[3, 1, '#FF0000'],[1, 0, '#CCCCCC'],
        ]
    }]
};