Echarts在线免费图表

 
            // 数据源
const dataOrigin = {
    xAxisData: [
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
    ],
    yAxisData: [
        '10-01',
        '10-02',
        '10-03',
        '10-04',
        '10-05',
        '10-06',
        '10-07',
    ],
    seriesDatas: [
        {
            name: '一级',
            data: [
                [0, 0, 54],
            ],
            color: '#00E400',
        },
        {
            name: '二级',
            data: [
                [1, 1, 36],
            ],
            color: '#ffff00',
        },
        {
            name: '三级',
            data: [
                [2, 2, 199],
            ],
            color: '#ff7e00',
        },
        {
            name: '四级',
            data: [
                [3, 3, 350],
                
            ],
            color: '#ff0000',
        },
        {
            name: '五级',
            data: [
                [4, 4, 10],
                
            ],
            color: '#99004c',
        },
        { name: '六级', data: [
                [5, 5, 700],

        ], color: '#7e0023' },
    ],
};

// PM10 等级
const PM10_LEVELS = [
    {
        icon: 'k1',
        label: '一级',
        otherName: '一级',
        value: 1,
        min: 0,
        max: 50,
        color: '#00E400',
        lightColor: '#D2F5A5',
    },
    {
        icon: 'k2',
        label: '二级',
        otherName: '二级',
        value: 2,
        min: 51,
        max: 150,
        color: '#ffff00',
        lightColor: '#EBEBD8',
    },
    {
        icon: 'k3',
        label: '三级',
        otherName: '三级',
        value: 3,
        min: 151,
        max: 250,
        color: '#ff7e00',
        lightColor: '#F2E1C7',
    },
    {
        icon: 'k4',
        label: '四级',
        otherName: '四级',
        value: 4,
        min: 251,
        max: 350,
        color: '#ff0000',
        lightColor: '#F3D3D3',
    },
    {
        icon: 'k5',
        label: '五级',
        otherName: '五级',
        value: 5,
        min: 351,
        max: 420,
        color: '#99004c',
        lightColor: '#E5D2ED',
    },
    {
        icon: 'k6',
        label: '六级',
        otherName: '六级',
        value: 6,
        min: 421,
        max: '+',
        color: '#7e0023',
        lightColor: '#F3CBD7',
    },
];

/**
 * @description 获取AQI等级
 * @params {number} value
 */
const getLevel = (value) => {
    let index = 0;
    if (!value || value <= 50) index = 0;
    if (value > 50 && value <= 100) index = 1;
    if (value > 100 && value <= 150) index = 2;
    if (value > 150 && value <= 200) index = 3;
    if (value > 200 && value <= 300) index = 4;
    if (value > 300) index = 5;
    return { index, ...PM10_LEVELS[index] };
};

// 获取悬浮提示元素
const getTooltipRow = (params, isHideEmpty = false) => {
    if (isHideEmpty && !params.value) return '';
    return `
  <div style="display: flex; justify-content: space-between; min-width: 80px; padding-top: 3px;">
    <span style="${params.marker ? '' : 'padding-left: 18px'}">${params.marker || ''} ${params.seriesName}</span>
    <span style="padding-left: 10px; font-weight: bold;">${params.value || '-'}</span>
  </div>`;
};

const visualMapPieces = PM10_LEVELS.map(({ min, max, color }) => ({ min, max, color }));

option = {
    title: {
        text: '测试',
        left: 'center',
        textStyle: {
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei',
            fontSize: 18,
        },
    },
    dataZoom: [
	        
	        {
	            id: 'dataZoomY',
	            type: 'inside',
	            yAxisIndex: [0],
				startValue:0,
				endValue:10,
	            filterMode: 'empty'
	        }
	    ],
    tooltip: {
        position: 'top',
        formatter: (params) => {
            const dateStr = `${dataOrigin.yAxisData[params.data[1]]}-${params.name}`;
            const value = {
                marker: params.marker,
                seriesName: getLevel(params.data[2]).label,
                value: params.data[2] || '-',
            };
            return `${dateStr}<br />${getTooltipRow(value)}`;
        },
    },
    grid: {
        top: 40,
        left: 65,
        right: 15,
        bottom: 65,
    },
    visualMap: {
        show: false,
        pieces: visualMapPieces,
    },
    legend: {
        show: true,
        icon: 'circle',
        bottom: 10,
    },
    xAxis: {
        type: 'category',
        data: dataOrigin.xAxisData,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitArea: {
            show: true,
        },
    },
    yAxis: {
        type: 'category',
        data: dataOrigin.yAxisData,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitArea: {
            show: true,
        },
    },
    series: dataOrigin.seriesDatas.map(({ name, data, color }) => ({
        name,
        data,
        type: 'heatmap',
        label: {
            show: true,
        },
        itemStyle: {
            color,
            borderColor: '#fff',
            borderWitdh: 5,
            borderCap: 'round',
        },
    })),
};