Echarts在线免费图表

 
            var dataBJ = [
    [1,55,9,56,0.46,18,6,"良"],
    [2,25,11,21,0.65,34,9,"优"],
    [9,267,216,280,'-',108,64,"重度污染"],
    [10,185,127,216,2.52,61,27,"中度污染"],
];


var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};

option = {
    color: [
        '#dd4444', '#fec42c', '#80F1BE'
    ],
    legend: {
        y: 'top',
        data: ['北京', '上海', '广州']
    },
    grid: {
        left: '10%',
        right: 200,
        top: '15%',
        bottom: '10%'
    },
    xAxis: {
        type: 'value',
        name: '日期',
        nameGap: 16,
        nameTextStyle: {
            fontSize: 14
        },
        max: 31,
        splitLine: {
            show: false
        },
        axisLabel: {
            formatter: '{value}'
        },
    },
    yAxis: {
        type: 'category',
        name: '空气质量',
        nameLocation: 'end',
        nameGap: 20,
        nameTextStyle: {
            fontSize: 20
        },
        splitLine: {
            show: false
        }
    },
    visualMap: [
        {
            left: null,
            right: 0,
            dimension: 7,
            selected: {
            },
            categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],
            inRange: {
                symbolSize: 30,
                symbol: {
                    '优': 'diamond',
                    '': 'circle'
                }
            },
            outOfRange: {
                color: '#ffff',
                symbolSize: {
                    '优': 50,
                    '': 30
                },
                symbol: {
                    '优': 'diamond',
                    '': 'circle'
                }
            }
        }
    ],
    series: [
        {
            name: '北京',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataBJ,
            encode: {
                x: 0,              // 表示维度 0 映射到 x 轴。
                y: 7,              // 表示维度 7 映射到 y 轴。
                tooltip: [0, 7]    // 表示维度 0,7 会在 tooltip 中显示。
            }
        },
    ],
    toolbox: {
        feature: {
            dataView: {},
        },
    },
};