Echarts在线免费图表

 
            let backgroundColor = 'rgba(0,0,0,1)';
let chartdata = [
    [111, 222, 333, 444],
    ['石油', '煤矿', '汽油', '电力'],
];

let yLabel = ['石油', '煤矿', '汽油', '电力'];
var getmyd = [111, 222, 333, 444];

// var getmydmc = chartdata[1]; //数据点名称
// var getmyd = chartdata[0]; //收入金额
// var getmydzd = [];

// let big = 0;
// getmyd.forEach((el) => {
//     if (!(el === undefined || el === '')) {
//         if (big < Number(el)) {
//             big = Number(el);
//         }
//     }
// });
// for (let i = 0; i < getmyd.length; i++) {
//     getmydzd.push(big * 4);
// }
//计算最大值
// function calMax(arr) {
//     let max = 0;
//     arr.forEach((el) => {
//         el.forEach((el1) => {
//             if (!(el1 === undefined || el1 === '')) {
//                 if (max < Number(el1)) {
//                     max = Number(el1);
//                 }
//             }
//         });
//     });
//     let maxint = Math.ceil(max / 9.5);
//     //不让最高的值超过最上面的刻度
//     let maxval = maxint * 10;
//     //让显示的刻度是整数
//     return maxval;
// }

// var max = Math.ceil(calMax([getmyd]) / 10) * 10;
option = {
    tooltip: {},
    backgroundColor: '#0f375f',
    animation: false,
    grid: {
        top: '25%',
        bottom: '10%', //也可设置left和right设置距离来控制图表的大小
    },
    xAxis: [
        {
            axisLabel: {
                color: '#fff',
                textStyle: {
                    fontSize: '13',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255,255,255,0.2)',
                },
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                    opacity: 0.3,
                },
            },
            axisTick: {
                show: false,
            },
        },
    ],
    yAxis: [
        {
            type: 'category',
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    // color: '#fff',
                    color: new echarts.graphic.LinearGradient(0, 1,1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(255,255,255,0.8)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)',
                        },
                    ]),
                    width: 1,
                },
            },
            axisLabel: {
                color: '#fff',
                textStyle: {
                    fontSize: '13',
                },
            },
            data: yLabel,
        },
    ],
    series: [
        {
            name: '值',
            type: 'bar',
            // zlevel: 1,
            xAxisIndex: 0,
            itemStyle: {
                normal: {
                    // barBorderRadius: [0, 5, 5, 0],
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 121, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 202, 220, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
            },
            barWidth: 15,
            data: getmyd,
            z: 0,
        },
        {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: '#022539',
                },
            },
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [2, 15],
            symbolPosition: 'start',
            symbolOffset: [-1, 0],
            data: getmyd,
            z: 66,
            animationEasing: 'elasticOut',
        },
    ],
};