echarts 折线配置项内容和展示

line

      var imgblue ='image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABuUlEQVRIibVWS07DMBB9jpM2tBuuAwtWXIINh2PTe7CAA1XQNo1jNGimepnaRVWFpdE0nuQ9z9cNm+0WlRVqhsrKpe3WPQfSwZHwc3aA2e2dbG0BoHGa9+BAJwKeSJ9I2gJ4rOjGeTCpJKfBJOyBgUcl9hIdgQCOBbGVah7I3gJA53SrdjuhgA0AjqobIp8U79cDH55WQZdOFmqHnm7Qdw/k2eQkXPJAQO9IFuTxqMDRndzCdqo4X0XeAwFeqfS6Dw1L50KWdJ9zBZ/kkgcrhHAf+/41xPggH+eUPtJ+/4acGXykXDQMWipTIxHpFfwZwFoI5Xfs+xf1aknhi5j3z4ygRtTpyWcrxPikYSoCe4J/W1wBcG1vcT3mlD79AXJK75rUkbr5bB61F4AHlb0kNPa9hOVRwSXJG7FpuQ41IhnXVp6dJs1Kc00lWipTAf8G8KXaZKc2eSdxmXKjGADPnmOh0XbkBYfrbFxziCw83P5jZVQcSCxMsxC1lfiX2v/wx7ArJrzmAVz7D1eM6zMPQICcDyO79sLhi2eWA7gbaXKdfc2VWfTASOQEAmYEtm6+9Nkg+va/LQB+AAC99erRdQKCAAAAAElFTkSuQmCC';
var imggreen ='image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB1klEQVRIibVWvU4CQRCevdvjECmgwlexsbK3tuF5fAYbExpfwspC38LSSCMmEvDulj0zZJZ8N+xi0LjJZGD3+L795u8wVy83lFgmdZBYbWzbqu8GvFEk+L1VgK3a253ZCECmPO6RAvUA7MHvSGwEPE/4TCnwYhvlCUlQQQDPhVhbrggY0EUsrE1KAe/1iKhQ3sp5uCGD1UTUiM+A3AveVoEOjxXQUllPzkluV8uzFSjzyswhBQx6AtYDxU6Ac3XzELZdxekq0goYeCDWl32SsBQqZBvZx1yRTnJMwcBkZjQ8G09tz57zj13tnpZvi1nrWwR3kIsMQWNlGkjY+sPJeGrL4pKMOSVjBvx5OBldi6oSwpdTt386BCmiwpbbm3eWLYsLCVMUWBP828IKINX2Ia6Nq9yzvoCrmkdJqoNu3ptH2QHgWuxrOV/MXNU8UNuu2Pjzcv5xz2dSrnWKCKvIqw7l+K45llwtn6/vt0R0B2XK4Ct5Bkk8zKIOATZKAMDZ00QabQ0qMFx74xpDFBRg+7vEqKjAUEEnRLH4x9q/+mHYRROeUkCq/esjxvXBJGM+AtmxL5xNLMmtIvEw03/zyowqCCR8AwYLBGH9+aWPB+z//reFiL4BbgAGjeNcO/MAAAAASUVORK5CYII='
let leimgblue ='image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAACR0lEQVRIib1XsY7TQBB967FzTghwBTWioIEfQFDzEVSU9xf8CM1JNPAHNNRIVHTQUPEHwHFObO8uGm5Wmkxsx06sG2k08a698/bN7MzGxRhh5cPV1d6YEjc02SH7DpS8Wq93nvORizplnQGln6MBEM3YILixgJLDzFg9poWdBgUkKHsQ1CFA2jH12MwwFES9sRgDagxDCQzJ+1bJAGIAbYcm8XMxxO8uABTG5jKfGGDnNYBGbJpL7LljGbLhygXMmdGFzEN2X8u7W8VcMNoL6hiGGMRS6UKt0woQMsykMNoTOhlQAmUZYiAr0VLGIWEqTAi9jNOYGjY2qbsYWsG5cyrL147oOTuL3n/2m8073BTboJip1TrDu3/z6eve4NNnjxMzuQLAJfWuVlouLxzRS/1t9P6jr6pLAH+McvmvJKRtyqFvX37sAerN+CxzyJwDUYacMhREKHL+fWPvP3kIR7ubjj7g1/efaNqA1vv/tvEerQ/wPiDEiBD6a2PeFVfFUDraK2HonlZH2VsAd3Z2SNnf9aMHFwB+G2WGrlVJ6GZooLneSsimNlfdj3SCsm44gaks4YheCBhO6vc8J45r+cab/jYYskMSTAUuZKeOT5OvKg7bpazRCJhrxUYCFVQvOwmQLmzJoe5dTUdhrBRLjWLp5OuHDlliSLeDtqd1bJVqhk4KWVf+dLWD7YHm2kzJo6kMwbSDesL1Y9ak1gATuKkXND9HUqfd6BtfwPFX2FkYSgvwDtl5ApTk1i/5eiG2s/4N2hEA/wAM60VKCMhUpwAAAABJRU5ErkJggg=='
let leimggreen ='image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAACeklEQVRIib2XvY4TMRDH/157s5cvKRHF0dLwDlBQ3QNcS3MlrwCvwCvQnISgp0O8AA9BQ4eouJMSCMn6AzmZIbO+/TwiRhr54t31/Pz32ONTIQSwXX59jRZTbQ9rLLQ9/PDoZW2/6RhUiVYlUPJ3SABC0tcK1xeIA2aotrJPWgzqBYgXbW+oJiAZWDe0WaKQJ3dJiyFQbQoxjKb3UtcJUASwNc7mTqVQfGcEIE9aQ89ZgRh8B6Cklp+xeuq+CqXLZQimSHxEz0Gz39G7W6GcT7wTaohCEWIsfCS+twSiE2V4GdMdOhiIoVKFIsiE/Iz6QcuUJ0voqF8POcO6krpOoYnK1GL2cHllRuZJDGZ39vP6+83b4IOEsSKXspY4d4I2qZPm0Yj8bHa+vDJFfgGlplBqEv+enS+ek2qFWE6N6vnVrdDlp1fHX4+XEqgJLDfFXpnqQEX+DMC7FpAKUCWuHKeS9V9uDl+qDFmmkGUamTbQxkBrcmPgvdhfbB7TB7fj985aOEduLbyz8N7B+4AQ/F2CGqAj+UEhFQDjgMIdcmYGYA6EOVDufV6OXxidX8iBbFl+XC021wBWB9fkxRrAhnah/SsATT61umrPuyvmQsyJKUFND2CYiqR+uoc5JvUtgDX5T9H+JiDHQPep9nyo8W7JaaYq7qbVtx9vAFzTuyUF/SXU2NG3XtSyXkvWZPJg44CydpU1B+NGqFFSvzvF9UNeIVghWQ5sQ+nYCpcKpfelQUAShhWqKwfbjuIqFeoN1VchJOVgN+D68c8KsclElHBDL2juFEnNs5E3Pp+UlCFX2JMoxAPEGcbgDMT23y/5cqDYnvTfoFoD8AdLpSoJS5EWZwAAAABJRU5ErkJggg=='

let data = [
    [10, 60, 40, 50, 30, 65, 44],
    [20, 40, 30, 60, 40, 50, 34]
    ]

option = {
    backgroundColor: '#010f1c',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            },
        }
    },

    grid: {
        left: '15px',
        top: '30px',
        right: '20px',
        bottom: '0',
        containLabel: true
    },
    legend: {
        itemWidth: 40,
        itemHeight: 16,

        data: [{
                name: '发现隐患数量',
                icon:leimggreen
            },
            {
                name: '整改隐患数量',
                icon: leimgblue
            }
        ],
        textStyle: {
            fontSize: 12, //字体大小
            color: '#f1f6fb', //字体颜色
        },
        right: '0%' //距离右侧
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisTick: {
            show: false
        },
        axisLine: {
            show: true, //y轴线
            lineStyle: {
                color: '#797f8a',

            }
        },
        axisLabel: {
            interval: 0, //设置x轴的标签显示可自适应
            show: true,
            textStyle: {
                color: '#d1d1d1'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#797f8a'],
                width: 1,
                type: 'solid'
            }
        },                                    
        data: ['烟感', '喷淋头', '消防栓', '灭火器', '监控', '防火门', '水管']

    }],
    yAxis: [{
        type: 'value',
        name: '单位 / 次',
        nameTextStyle: { //y轴上方单位的颜色
            color: '#d1d1d1'
        },
        nameGap: 10,
        axisTick: {
            show: false
        },
        axisLine: {
            show: true, //y轴线
            lineStyle: {
                color: '#797f8a',

            }
        },
        axisLabel: {
            // margin: 10,
            textStyle: {
                fontSize: 12,
                color: '#d1d1d1',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#797f8a'],
                width: 1,
                type: 'solid'
            }
        },


    }],
    series: [
        {
            name: '发现隐患数量',
            type: 'line',
            symbol: imggreen,
            symbolSize: 30,
            showSymbol: true,
            
            lineStyle: {
                shadowColor: '#fff',
                shadowBlur: 10,
                shadowOffsetY: 0,
                width: 2,
                color: '#60ff9f',

            },
            
            itemStyle: {
                normal: {
                    color: '#60ff9f',
                    borderColor: '#60ff9f',
                    borderWidth: 0

                }
            },

            data: data[0],
        },
        {
            name: '整改隐患数量',
            type: 'line',
            symbol: imgblue,
            symbolSize: 30,
            showSymbol: true,
            
            lineStyle: {
                shadowColor: '#fff',
                shadowBlur: 10,
                shadowOffsetY: 0,
                width: 2,
                color: '#abffff',

            },
            
            itemStyle: {
                normal: {
                    color: '#abffff',
                    borderColor: '#abffff',
                    borderWidth: 0

                }
            },

            data: data[1],
        },


    ]
};

console.log(option)