Echarts在线免费图表

 
            /** 
 * 
 * 作者: GhostCat
 * 博客: https://gcat.cc
 * 描述: 渐变著柱状图
 * 
 */
let xLabel = ['语文', '数学', '英语', '科学']
let seriesData = [20, 30, 40,62]
let allData = [62, 62, 62, 62]
var fillImg = 'data:image/png;base64,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';
option = {
    tooltip: {},
    backgroundColor: '#0f375f',
    animation: false,
    grid: {
        top: "25%",
        bottom: "10%"//也可设置left和right设置距离来控制图表的大小
    },

    xAxis: {
        data: xLabel,
        axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
                color: '#11417a'
            }
        },
        axisTick: {
            show: true //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
            margin: 14,
            fontSize: 14,
            textStyle: {
                color: "#A3C0DF" //X轴文字颜色
            }
        },

    },
    yAxis: [
        {
            type: "value",
            gridIndex: 0,
            min: 0,
            max: 62,
            // interval: 25,
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#113763',
                    width: 1
                },
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#11417a'
                }
            },
            axisLabel: {
                show: false,
                margin: 14,
                fontSize: 14,
                textStyle: {
                    color: "#A3C0DF" //X轴文字颜色
                }
            },
        },
    ],
    series: [
        {
            name: "主营业务",
            type: "bar",
            barWidth: 30,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0.01,
                        color: "#FFFFE0"
                    },
                    {
                        offset: 0.5,
                        color: "#90EE90"
                    },
                    {
                        offset: 1,
                        color: "#40E0D0"
                    },
                 
                 ])
                }
            },
            data: seriesData,
            z: 10,
            zlevel: 0,
            "label": {
                "show": true,
                "position": "top",
                "distance": 10,
                fontSize: 16,
                "color": "#01fff4"
            }
        },
        {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
                normal: {
                    color: "#0F375F"
                }
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [30, 2],
            symbolPosition: "start",
            symbolOffset: [0, -10],
            data: seriesData,
            width: 30,
            z: 0,
            zlevel: 1,
        },
        ,
        {
            //辅助背景图形
            name: "背景条",
            type: "bar", //pictorialBar
            barWidth: "30",
            barGap: "-100%",
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: "rgba(146,158,48,0.2)",
                },
                barBorderRadius: 10,
            },
            data: allData,
            z: 0,
            zlevel: 0,
        }
    ]
};

function run() {
    seriesData = [20, 30, 40,62]
    for (var i = 0; i < xLabel.length; ++i) {
         seriesData[i] = Math.round(Math.random() * (seriesData[i]/2)) + (seriesData[i]/2)
    }
    option.series[0].data = seriesData
    option.series[1].data = seriesData
    myChart.setOption(option, true);
}
setTimeout(function () {
    run();
}, 0);
setInterval(function () {
    run();
}, 300);