Echarts在线免费图表

 
            const xData = [1, 2, 3, 4, 5];
const yData1 = [23, 35, 12, 23, 34];
const barWidth = 30;
const color1 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
        {
            // 柱状图上方颜色
            offset: 0,
            color: '#be6331',
        },
        {
            // 柱状图下方颜色
            offset: 1,
            color: '#ceb149',
        },
    ],
};
const maxData = yData1.map(() => 100);
const circleData = yData1.map(() => ({ name: '', value: 100, symbolPosition: 'end' }));

option = {
    backgroundColor: '#0A2E5D',
    // 提示框
    tooltip: {
        // 提示
        show: true,
        trigger: 'axis',
        formatter: '{b0}: {c0}',
    },
    grid: {
        top: '15%',
        left: '10%',
        right: '3%',
        bottom: '15%',
    },
    xAxis: [
        // 立体柱状图由两部分堆叠组成 ，设置serve中xAxisIndex可进行堆叠
        // 横向柱状图 xAxis中 type设置成value yAxis设置category ，serve中设置yAxisIndex可进行堆叠
        {
            type: 'category',
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#98d7e9',
                },
            },
            axisLabel: {
                interval: 0,
                rotate: 0,
                color: '#98d7e9',
                textStyle: {
                    fontSize: '10',
                },
                //   margin: 10, //刻度标签与轴线之间的距离。
            },
            data: xData,
        },
        {
            type: 'category',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitArea: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            data: xData,
        },
    ],
    yAxis: [
        {
            type: 'value',
            name: '单位:个',
            nameTextStyle: {
                color: '#98d7e9',
            },
            scale: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#98d7e9',
                },
            },
            axisLabel: {
                color: '#98d7e9',
            },
            splitLine: {
                show: false,
            },
        },
    ],

    series: [
        {
            name: '内部柱子顶部',
            type: 'pictorialBar',
            tooltip: { show: false },
            symbolSize: [barWidth, 10],
            symbol: 'diamond',
            symbolOffset: ['0%', '-50%'],
            symbolPosition: 'end',
            z: 15,
            color: '#ceb149',
            zlevel: 2,
            data: yData1,
        },

        {
            // 内部柱子部分
            type: 'bar',
            barGap: '60%',
            barWidth,
            itemStyle: {
                color: color1,
                borderColor: color1,
                borderWidth: 1,
                borderType: 'solid',
            },
            label: {
                show: false,
            },
            zlevel: 2,
            data: yData1,
        },
        {
            name: '背景柱子',
            type: 'bar',
            tooltip: { show: false },
            xAxisIndex: 1,
            barGap: '60%',
            data: yData1.map(() => 100),
            zlevel: 1,
            barWidth,
            itemStyle: {
                normal: {
                    color: 'rgba(16, 56, 70,.8)',
                },
            },
        },
        {
            name: '内部柱子底部',
            type: 'pictorialBar',
            tooltip: { show: false },
            symbol: 'diamond',
            symbolSize: [barWidth, 10],
            symbolOffset: ['00%', '60%'],
            z: 12,
            color: '#ceb149',
            data: maxData,
        },
        // 头
        {
            name: '背景柱子顶部',
            type: 'pictorialBar',
            tooltip: { show: false },
            z: 20,
            zlevel: 3,
            symbolPosition: 'end',
            symbolSize: [barWidth, 10],
            symbol: 'diamond',
            symbolOffset: [0, -5],
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 5,
                    shadowOffsetY: 3,
                    shadowOffsetX: 0,
                    color: 'rgba(30, 100, 112,1)',
                },
            },
            data: circleData,
        },
    ],
};