Echarts在线免费图表

 
            let kData = [
    [55, 45, 45, 55],
    [85, 65, 62, 90],
    [110, 90, 85, 120],
    [75, 45, 40, 80],
    [105, 95, 85, 110],
    [85, 65, 62, 90],
    [75, 60, 55, 80],
    [110, 98, 90, 120]
]
// 数据解析：仅是此图中
// 第一个数是：大盒子的上沿位置，
// 第二个数是：大盒子的下沿位置，
// 第三个数是：大盒子上面竖线的位置，
// 第三个数是：大盒子下面竖线的位置，
// 正常情况：第一个数和第二个数的顺序无所谓，都代表的是大盒子的高度，第三个数和第四个数的顺序无所谓，都代表的是大盒子外竖线的位置；
let shuXianData = []
let juxingData = []
let yuanquanData = []
kData.map((item, key) => {
    console.log("key", key)
    shuXianData.push(
        [
            item[1],
            item[0],
            item[1],
            item[0]
        ]
    )
    juxingData.push(
        {
            xAxis: key,
            yAxis: item[0]
        }
    )
    yuanquanData.push(
        {
            xAxis: key,
            yAxis: item[1]
        }
    )
})
option = {
    xAxis: {
        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (p) {
            // console.log(p)
            if (p.seriesType === 'line') return '';
            return `${p[0].name}<br/>${p[0].marker}中位数：${(p[0].value[1] + p[0].value[2]) / 2}次<br/>${p[0].marker}上四分位数：${p[0].value[1]}次<br/>${p[0].marker}下四分位数：${p[0].value[2]}次<br/>${p[0].marker}上极限：${p[0].value[4]}次<br/>${p[0].marker}下极限：${p[0].value[3]}次`
        }
    },
    yAxis: {},
    series: [
        {
            name: "K线图",
            type: 'candlestick',
            itemStyle: {
                color: 'rgba(255, 255, 255, 0)',
                color0: 'rgba(255, 255, 255, 0)',
                borderColor: '#23a4f5',
                borderColor0: '#23a4f5',
                borderWidth: 3,
            },
            data: kData
        },
        {
            name: "竖线和实心圆圈",
            type: 'candlestick',
            itemStyle: {
                color: 'rgba(255, 255, 255, 0)',
                color0: 'rgba(255, 255, 255, 0)',
                borderColor: '#23a4f5',
                borderColor0: '#23a4f5',
                borderWidth: 3,
            },
            barWidth: 1,
            data: kData,
            markPoint: {
                symbol: 'circle',
                symbolSize: 10,
                // 设置数据点的样式
                itemStyle: {
                    // 设置为透明或接近背景的颜色  
                    // color: 'transparent',
                    color: '#23a4f5',
                    // 设置边框颜色  
                    borderColor: '#23a4f5',
                    // 设置边框宽度  
                    borderWidth: 2
                },
                tooltip: { show: false },
                silent: true,
                data: yuanquanData
            }
        },
        {
            name: '最上面的矩形',
            type: 'bar',
            data: [],
            markPoint: {
                symbol: 'rect',
                symbolSize: 20,
                // 设置数据点的样式  
                itemStyle: {
                    // 设置为透明或接近背景的颜色  
                    color: 'transparent',
                    // 设置边框颜色  
                    borderColor: 'blue',
                    // 设置边框宽度  
                    borderWidth: 2
                },
                tooltip: { show: false },
                silent: true,
                data: juxingData
            }
        },
        {
            name: '折线图1',
            type: 'line',
            // smooth: true, // 折线是否光滑
            symbol: 'circle',
            symbolSize: 10,
            z: 2,
            itemStyle: {
                color: '#5487FF'
            },
            lineStyle: {
                normal: {
                    width: 4,
                    color: '#5487FF', // 线条颜色
                },
            },
            data: [52, 80, 105, 65, 102, 80, 72, 106]
        },
        {
            name: '折线',
            type: 'line',
            // smooth: true, // 折线是否光滑
            // symbol: 'circle',
            symbolSize: 10,
            data: [
                48, 70, 95, 55, 97, 70, 64, 94
            ],
            itemStyle: {
                color: '#ffff00'
            },
            lineStyle: {
                normal: {
                    width: 4,
                    color: '#ffff00', // 线条颜色
                },
            },
            z: 2
        }
    ]
};