Echarts在线免费图表

 
            // mock 数据
const dataArr = {
    xdata: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
    rateData: [90, 92, 98, 88, 96, 97, 94],
    disinfeced: [150, 320, 300, 210, 240, 180, 288],
    placeData: [320, 435, 490, 340, 320, 270, 360 ]
}

const legend = {
    data: ['场所数', '已消杀', '完成率'],
    textStyle: { fontSize: 14, color: '#fff'},
    itemWidth: 25,
    itemHeight: 15,
    itemGap: 15,
    bottom: '5%',
    selectedMode: false
}
const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%'}
// xAxis
const xAxis = { 
    axisTick: { show: true },
    axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
    axisLabel: { textStyle: { fontSize: 12, color: '#fff'  }, },
    data: dataArr.xdata
}

// yAxis
const yAxis = [{ 
    splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
    axisLine: { show: false, },
    axisLabel: { textStyle: { fontSize: 16, color: '#fff' } }
},{
    // 双y轴，主要用于折线图，所以不需要显示坐标
    show: false
}]

// series
const series = [{
    z: 3,
    name: '上部1',
    type: 'pictorialBar',
    symbolPosition: 'end',
    data: dataArr.placeData,
    symbol : 'diamond',
    symbolOffset: [0,'-50%'],
    symbolSize: [30, 20],
    itemStyle: {
        borderColor: '#2fffa4',
        borderWidth: 2,
        color: '#2fffa4'
    },
},{
    z:1,
    type: 'bar',
    name: '场所数',
    barGap: '-100%',
    barWidth: 30,
    data: dataArr.placeData,
    itemStyle:{ 
        borderColor: '#2fffa4',
        borderWidth: 1,
            color: {
            type: 'linear',
            x: 0, x2: 1, y: 0, y2: 0,
            colorStops: [{ offset: 0, color: 'rgba(47,255,164,.2)' }, { offset: 0.5, color: 'rgba(47,255,164,.2)' }, { offset: 0.5, color: 'rgba(49,245,160,.7)' }, { offset: 1, color: 'rgba(49,245,160,.2)' }]
        }
    },
},{ 
    z:2,
    name: '底部',
    type: 'pictorialBar',
    data: [1, 1, 1, 1, 1, 1, 1, 1],
    symbol: 'diamond',
    symbolOffset: [0, '50%'],
    symbolSize: [30, 20],
    itemStyle: { 
        color: {
            type: 'linear',
            x: 0, x2: 1, y: 0, y2: 0,
            colorStops: [{ offset: 0, color: '#2fffa4' }, { offset: 0.5, color: '#2fffa4' }, { offset: 0.5, color: 'rgba(49,245,160,.7)' }, { offset: 1, color: '#31f5a0' }]
        }
    },
},{
    z: 3,
    name: '上部1',
    type: 'pictorialBar',
    symbolPosition: 'end',
    data: dataArr.disinfeced,
    symbol : 'diamond',
    symbolOffset: [0, '-50%'],
    symbolSize: [30, 20],
    itemStyle: {
        borderColor: '#2fffa4',
        borderWidth: 2,
        color: '#2fffa4'
    },
},{
    z:1,
    stack: '总量',
    type: 'bar',
    name: '已消杀',
    barWidth: 30,
    // barGap: '-100%',
    data: dataArr.disinfeced,
    itemStyle: {
        color: {
            type: 'linear',
            x: 0, x2: 1, y: 0, y2: 0,
            colorStops: [{ offset: 0, color: 'rgba(49,245,160,.7)' }, { offset: 0.5, color: 'rgba(49,245,160,.5)' }, { offset: 0.5, color: 'rgba(49,245,160,.5)' }, { offset: 1, color: 'rgba(49,245,160,.7)' }]
        }
    },
},{   
    z: 9,
    // 双y轴
    yAxisIndex: 1,
    name: '完成率', type: 'line',
    symbol: 'circle',
    symbolSize: [20, 20],
    color: { 
        type: 'linear',x: 1, y: 0, x2: 0, y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset: 0, color: '#ffd11a' }, { offset: 1, color: '#fff5cc'}],
        global: false // 缺省为 false
    },
    lineStyle: { color: { 
        type: 'linear',x: 1, y: 0, x2: 0, y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset: 0, color: '#ffd11a' }, { offset: 1, color: '#fff5cc'}],
        global: false // 缺省为 false
    }}, 
    // 修改的是线下区域的颜色
    areaStyle: { 
        color: new echarts.graphic.LinearGradient(
        // 右/下/左/上
        0, 0, 0, 1,[
            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
            { offset: 1, color: 'transparent' }
        ])
    },
    label: {
        show: true,
        formatter: params => {
            return `${params.value}%`
        },
        textStyle: { fontSize: 16, color: '#ffd11a' } 
    },
    data: dataArr.rateData
}]
option = { xAxis, yAxis, series, grid, legend, backgroundColor:'rgba(0, 0, 0, .8)' }