一生的医疗情况echarts 折线配置项内容和展示

      var colors = ['#22c3aa', '#5793f3', '#d14a61', '#675bba'];
option = {
    color: colors,
    tooltip: {},
    grid: [
        {x: '7%', y: '8%', width: '82%', height: '55%', 
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
        },
        {x: '7%', y2: '7%', width: '82%', height: '24%',
            tooltip: {
                formatter: function(params){
                    if(params.data[2]){
                        return params.data[2].date + '<br>' + params.data[2].desc.replace(' ', '<br>')   
                    }
                }
            },
        },
    ],
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    dataZoom: [{
        xAxisIndex: [0, 1],
        startValue: '2014-06-01'
    }, {
        xAxisIndex: [0, 1],
        type: 'inside'
    }],
    legend: {
        data: ['健康评分', '体温', '收缩压', '舒张压']
    },
    xAxis: [{
            gridIndex: 0,
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: ["1919-04-18 10:48", "1920-04-18 10:48", "1921-04-18 10:48", "1922-04-18 10:48", 
            "1923-04-18 10:48", "1924-04-18 10:48", "1925-04-18 10:48", "1926-04-18 10:48", 
            "1927-04-18 10:48", "1928-04-18 10:48", "1929-04-18 10:48", "1930-04-18 10:48", 
            "1931-04-18 10:48", "1932-04-18 10:48", "1933-04-18 10:48", "1934-04-18 10:48", 
            "1935-04-18 10:48", "1936-04-18 10:48", "1937-04-18 10:48", "1938-04-18 10:48", 
            "1939-04-18 10:48", "1940-04-18 10:48", "1941-04-18 10:48", "1942-04-18 10:48", 
            "1943-04-18 10:48", "1944-04-18 10:48", "1945-04-18 10:48", "1946-04-18 10:48", 
            "1947-04-18 10:48", "1948-04-18 10:48", "1949-04-18 10:48", "1950-04-18 10:48", 
            "1951-04-18 10:48", "1952-04-18 10:48", "1953-04-18 10:48", "1954-04-18 10:48", 
            "1955-04-18 10:48", "1956-04-18 10:48", "1957-04-18 10:48", "1958-04-18 10:48", 
            "1959-04-18 10:48", "1960-04-18 10:48", "1961-04-18 10:48", "1962-04-18 10:48", 
            "1963-04-18 10:48", "1964-04-18 10:48", "1965-04-18 10:48", "1966-04-18 10:48", 
            "1967-04-18 10:48", "1968-04-18 10:48", "1969-04-18 10:48", "1970-04-18 10:48", 
            "1971-04-18 10:48", "1972-04-18 10:48", "1973-04-18 10:48", "1974-04-18 10:48", 
            "1975-04-18 10:48", "1976-04-18 10:48", "1977-04-18 10:48", "1978-04-18 10:48", 
            "1979-04-18 10:48", "1980-04-18 10:48", "1981-04-18 10:48", "1982-04-18 10:48", 
            "1983-04-18 10:48", "1984-04-18 10:48", "1985-04-18 10:48", "1986-04-18 10:48", 
            "1987-04-18 10:48", "1988-04-18 10:48", "1989-04-18 10:48", "1990-04-18 10:48", 
            "1991-04-18 10:48", "1992-04-18 10:48", "1993-04-18 10:48", "1994-04-18 10:48", 
            "1995-04-18 10:48", "1996-04-18 10:48", "1997-04-18 10:48", "1998-04-18 10:48", 
            "1999-04-18 10:48", "2000-04-18 10:48", "2001-04-18 10:48", "2002-04-18 10:48", 
            "2003-04-18 10:48", "2004-04-18 10:48", "2005-04-18 10:48", "2006-04-18 10:48", 
            "2007-04-18 10:48", "2008-04-18 10:48", "2009-04-18 10:48", "2010-04-18 10:48", 
            "2011-04-18 10:48", "2012-04-18 10:48", "2013-04-18 10:48", "2014-04-18 10:48", 
            "2015-04-18 10:48", "2016-04-18 10:48", "2017-04-18 10:48", "2018-04-18 10:48"]
        }, {
            gridIndex: 1,
            type: 'category',
            axisTick: { alignWithLabel: true },
            data: ["1919-04-18 10:48", "1920-04-18 10:48", "1921-04-18 10:48", "1922-04-18 10:48", 
            "1923-04-18 10:48", "1924-04-18 10:48", "1925-04-18 10:48", "1926-04-18 10:48", 
            "1927-04-18 10:48", "1928-04-18 10:48", "1929-04-18 10:48", "1930-04-18 10:48", 
            "1931-04-18 10:48", "1932-04-18 10:48", "1933-04-18 10:48", "1934-04-18 10:48", 
            "1935-04-18 10:48", "1936-04-18 10:48", "1937-04-18 10:48", "1938-04-18 10:48", 
            "1939-04-18 10:48", "1940-04-18 10:48", "1941-04-18 10:48", "1942-04-18 10:48", 
            "1943-04-18 10:48", "1944-04-18 10:48", "1945-04-18 10:48", "1946-04-18 10:48", 
            "1947-04-18 10:48", "1948-04-18 10:48", "1949-04-18 10:48", "1950-04-18 10:48", 
            "1951-04-18 10:48", "1952-04-18 10:48", "1953-04-18 10:48", "1954-04-18 10:48", 
            "1955-04-18 10:48", "1956-04-18 10:48", "1957-04-18 10:48", "1958-04-18 10:48", 
            "1959-04-18 10:48", "1960-04-18 10:48", "1961-04-18 10:48", "1962-04-18 10:48", 
            "1963-04-18 10:48", "1964-04-18 10:48", "1965-04-18 10:48", "1966-04-18 10:48", 
            "1967-04-18 10:48", "1968-04-18 10:48", "1969-04-18 10:48", "1970-04-18 10:48", 
            "1971-04-18 10:48", "1972-04-18 10:48", "1973-04-18 10:48", "1974-04-18 10:48", 
            "1975-04-18 10:48", "1976-04-18 10:48", "1977-04-18 10:48", "1978-04-18 10:48", 
            "1979-04-18 10:48", "1980-04-18 10:48", "1981-04-18 10:48", "1982-04-18 10:48", 
            "1983-04-18 10:48", "1984-04-18 10:48", "1985-04-18 10:48", "1986-04-18 10:48", 
            "1987-04-18 10:48", "1988-04-18 10:48", "1989-04-18 10:48", "1990-04-18 10:48", 
            "1991-04-18 10:48", "1992-04-18 10:48", "1993-04-18 10:48", "1994-04-18 10:48", 
            "1995-04-18 10:48", "1996-04-18 10:48", "1997-04-18 10:48", "1998-04-18 10:48", 
            "1999-04-18 10:48", "2000-04-18 10:48", "2001-04-18 10:48", "2002-04-18 10:48", 
            "2003-04-18 10:48", "2004-04-18 10:48", "2005-04-18 10:48", "2006-04-18 10:48", 
            "2007-04-18 10:48", "2008-04-18 10:48", "2009-04-18 10:48", "2010-04-18 10:48", 
            "2011-04-18 10:48", "2012-04-18 10:48", "2013-04-18 10:48", "2014-04-18 10:48", 
            "2015-04-18 10:48", "2016-04-18 10:48", "2017-04-18 10:48", "2018-04-18 10:48"]
        }
    ],
    yAxis: [{
            gridIndex: 0,
            type: 'value',
            name: '健康评分',
            min: 0,
            max: 100,
            position: 'left',
            offset: 50,
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            }
        }, {
            gridIndex: 0,
            type: 'value',
            name: '体温',
            min: 0,
            max: 50,
            position: 'left',
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value} °C'
            }
        }, {
            gridIndex: 0,
            type: 'value',
            name: '收缩压',
            min: 90,
            max: 139,
            position: 'right',
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: colors[2]
                }
            },
            axisLabel: {
                formatter: '{value} mmHg'
            }
        }, {
            gridIndex: 0,
            type: 'value',
            name: '舒张压',
            min: 60,
            max: 89,
            position: 'right',
            offset: 80,
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: colors[3]
                }
            },
            axisLabel: {
                formatter: '{value} mmHg'
            }
        }, {
            gridIndex: 1,
            type: 'category',
            data: ['生病', '门诊', '处方', '住院'],
            axisTick: { alignWithLabel: true }
        }
    ],
    series: [
        {
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: '健康评分',
            type: 'line',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            data: ["83", "87", "82", "87", "87", "85", "86", "86", "89", "82", "84", "81", "87",
                "85", "88", "81", "81", "86", "85", "85", "89", "86", "87", "87", "80", "90",
                "86", "85", "84", "86", "83", "88", "85", "90", "86", "87", "82", "82", "86",
                "82", "88", "88", "87", "82", "82", "81", "86", "83", "80", "84", "83", "88",
                "86", "82", "81", "81", "80", "80", "83", "84", "81", "82", "82", "80", "90",
                "85", "82", "84", "80", "84", "88", "88", "85", "84", "89", "85", "81", "90",
                "81", "83", "81", "86", "80", "83", "86", "89", "83", "89", "82", "82", "86",
                "90", "83", "83", "86", "82", "81", "88", "90", "83"]
        }, {
            xAxisIndex: 0,
            yAxisIndex: 1,
            name: '体温',
            type: 'line',
            data: ["37.7", "37.3", "37.8", "37.2", "37.9", "36.8", "36.4", "37.6", "37.1", "37.2",
                "37.3", "38.0", "36.3", "37.0", "36.5", "37.4", "37.9", "37.6", "37.2", "37.7",
                "37.1", "36.2", "36.5", "36.5", "36.5", "36.2", "36.8", "36.2", "37.8", "37.9",
                "37.2", "37.9", "37.5", "36.1", "36.1", "36.6", "37.8", "37.0", "36.8", "36.8",
                "36.9", "38.0", "36.2", "36.8", "37.1", "36.6", "37.5", "36.2", "37.2", "37.3",
                "36.9", "36.5", "36.4", "36.2", "36.9", "36.5", "36.1", "36.6", "37.4", "37.6",
                "37.2", "37.6", "36.1", "37.4", "36.6", "37.8", "36.5", "36.2", "36.3", "36.2",
                "36.1", "37.9", "37.3", "36.6", "36.5", "36.7", "37.1", "36.2", "37.9", "37.5",
                "37.9", "37.8", "36.9", "36.6", "37.6", "36.3", "37.3", "36.7", "37.6", "36.6",
                "36.7", "36.8", "36.3", "36.2", "36.0", "37.1", "37.9", "36.5", "36.9", "37.6"]
        }, {
            xAxisIndex: 0,
            yAxisIndex: 2,
            name: '收缩压',
            type: 'line',
            data: ["108.8", "101.1", "106.2", "102.0", "104.8", "100.4", "100.1", "102.5", "106.8",
                "101.4", "100.3", "104.2", "100.1", "102.1", "104.0", "106.3", "107.1", "105.6",
                "103.9", "105.0", "105.3", "107.3", "107.0", "108.9", "100.2", "104.1", "106.1",
                "106.8", "109.6", "102.1", "106.4", "107.0", "104.7", "104.9", "104.2", "106.4",
                "108.6", "100.7", "105.4", "105.6", "105.6", "105.9", "106.1", "108.0", "107.2",
                "106.9", "103.0", "109.6", "107.9", "100.5", "108.0", "106.3", "100.5", "109.1",
                "105.1", "100.7", "104.1", "108.0", "109.9", "103.4", "104.9", "109.7", "104.3",
                "102.5", "103.9", "108.7", "105.9", "101.4", "107.8", "100.4", "102.1", "101.7",
                "105.2", "103.9", "102.6", "101.7", "109.6", "108.5", "101.7", "104.3", "101.0",
                "107.6", "103.5", "109.4", "103.1", "104.7", "103.6", "101.7", "104.7", "102.8",
                "102.0", "106.4", "100.8", "104.3", "105.2", "105.7", "107.9", "101.4", "108.0", "100.4"]
        }, {
            xAxisIndex: 0,
            yAxisIndex: 3,
            name: '舒张压',
            type: 'line',
            data: ["74.5", "70.5", "73.7", "70.2", "65.9", "66.9", "73.3", "67.8", "73.0", "71.5",
                "70.7", "72.4", "74.4", "71.4", "65.7", "71.0", "69.5", "65.0", "73.1", "72.5",
                "70.1", "70.8", "68.6", "66.9", "72.2", "68.2", "67.8", "69.1", "70.9", "65.8",
                "72.0", "71.5", "68.8", "72.7", "66.7", "73.8", "70.6", "74.2", "72.4", "70.0",
                "65.0", "72.6", "65.6", "71.8", "65.7", "66.4", "66.8", "65.3", "70.9", "73.2",
                "69.2", "67.1", "71.8", "74.4", "66.0", "65.0", "73.1", "73.7", "74.2", "68.3",
                "66.3", "74.4", "69.2", "71.9", "70.7", "69.9", "70.0", "72.7", "73.0", "68.1",
                "75.0", "67.2", "65.9", "68.5", "70.4", "66.9", "68.2", "65.9", "71.9", "67.5",
                "70.2", "70.0", "70.9", "70.2", "72.0", "71.2", "73.0", "70.8", "70.6", "67.7",
                "72.5", "73.2", "73.0", "74.3", "67.9", "65.0", "69.8", "71.3", "67.6", "71.6"]
        }, {
            xAxisIndex: 1,
            yAxisIndex: 4,
            type: 'scatter',
            symbolSize: 16,
            tooltip: {
                formatter: function(params){
                    if(params.data[2]){
                        return params.data[2].date + '<br>' + params.data[2].desc.replace(' ', '<br>')   
                    }
                }
            },
            data: [
                [20 - 1, 0, { date: '1959-06-01', desc: '感冒' }],
                [30 - 1, 0, { date: '1969-06-01', desc: '感冒' }],
                [40 - 1, 0, { date: '1979-06-01', desc: '感冒' }],
                [50 - 1, 0, { date: '1989-06-01', desc: '感冒' }],
                [60 - 1, 0, { date: '1999-06-01', desc: '感冒' }],
                [70 - 1, 0, { date: '2009-06-01', desc: '感冒' }],
                [80 - 1, 0, { date: '2019-06-01', desc: '感冒' }],
                
                [24 - 1, 1, { date: '1963-06-01', desc: '科室：口腔科 口腔溃疡' }],
                [28 - 1, 1, { date: '1967-06-01', desc: '科室：呼吸科 呼吸道感染' }],
                [35 - 1, 1, { date: '1974-06-01', desc: '科室：骨科 骨折' }],
                
                [24 - 1, 2, { date: '1963-06-01', desc: '口腔处方' }],
                [28 - 1, 2, { date: '1967-06-01', desc: '呼吸感染处方' }],
                
                [35 - 1, 1, { date: '1974-06-01', desc: '科室：骨科 骨折' }],
                
                [35 - 1, 3, { date: '1974-06-01', desc: '骨折住院' }],
            ]
        }
    ]
};