zaibei_charts/test/bar/ChartBar34/index.js

import ChartBar from '../../../src/chart/bar/ChartBar34/ChartBar34.js';

var chart = new ChartBar(document.getElementsByClassName("chartContainer")[0], {});
window.chart = chart;
window.addEventListener("resize", function () {
    chart.resize();
});

window.addEventListener('elementClick', (a, b) => {
    console.log('触发', a.detail)
});

let option = {
    type: "p1",
    bg: {
        backgroundColor: '#000000'
    },
    title: {},
    tooltip: {
        bgStyle: {
            backgroundColor: 'rgba(0,0,0,0.7)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },
    },
    legend: {
        left: "18%",
        top: '6%',
        itemWidth: 12,
        circleSize: 4,
        textStyle: {
            fontSize: 16,
            // color: '#50a7bd'
        }
    },
    grid: {
        left: '18%',
        top: '20%',
        right: '18%',
        bottom: '18%',
        containLabel: false,
    },
    // legend: Legend.option,
    xAxis: {
        type: "category",
        lastLabel: '总花费',
        data: ["类别一", "类别二", "类别三", "类别四", "类别五", "类别六", "类别七", "类别八", "类别六", "类别七", "类别八"],
        // min:0,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#333333',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: false,
            alignWithLabel: false,
            interval: 'auto',
            length: 5,
            lineStyle: {
                color: '#333333',
                width: 1
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#333333',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 14,
                color: '#bdbdbd',
                backgroundColor: 'rgba(255,255,255,0.05)',
                highlightColor: 'rgba(255,255,255,0.4)',
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: '#333333',
                width: 2,
                type: 'solid',
                distance: 2, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto',
            length: -4,
            lineStyle: {
                color: '#333333',
                width: 2
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#333333',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 16,
                color: '#797979'
            }
        },
        bgColor: 'rgba(255,255,255,0.05)',
    },
    shape: {
        barCategoryGap: '60%',
        // barGap: '8%',
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#00f4fe'
            },
            positionX: 5
        },
        circleSize: 5,
    },
    series: [
        {
            name: '花费',
            type: 'bar',
            data: [[220, 1450], [50, 1000], [100, 1500], [250, 1300], [450, 800], [200, 1600], [600, 1800], [580, 1300], [250, 1300], [450, 800], [200, 1600]],
        }
    ],
    color: ["#3fffa7", "#3f90ff"],
};
let option2 = {
    type: "p1",
    bg: {
        backgroundColor: '#000000'
    },
    title: {},
    tooltip: {
        bgStyle: {
            backgroundColor: 'rgba(0,0,0,0.7)',
            // borderColor:'#888e0e',
            // borderWidth:1
        },
    },
    legend: {
        left: "18%",
        top: '6%',
        itemWidth: 12,
        circleSize: 4,
        textStyle: {
            fontSize: 16,
            // color: '#50a7bd'
        }
    },
    grid: {
        left: '18%',
        top: '20%',
        right: '18%',
        bottom: '18%',
        containLabel: false,
    },
    // legend: Legend.option,
    xAxis: {
        type: "category",
        lastLabel: '总花费',
        data: ["类别一", "类别二", "类别三"],
        // min:0,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#333333',
                width: 2,
                type: 'solid'
            }
        },
        axisTick: {
            show: false,
            alignWithLabel: false,
            interval: 'auto',
            length: 5,
            lineStyle: {
                color: '#333333',
                width: 1
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#333333',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 14,
                color: '#bdbdbd',
                backgroundColor: 'rgba(255,255,255,0.05)',
                highlightColor: 'rgba(255,255,255,0.4)',
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: '#333333',
                width: 2,
                type: 'solid',
                distance: 2, //偏移距离
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto',
            length: -4,
            lineStyle: {
                color: '#333333',
                width: 2
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#333333',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 16,
                color: '#797979'
            }
        },
        bgColor: 'rgba(255,255,255,0.05)',
    },
    shape: {
        barCategoryGap: '60%',
        // barGap: '8%',
        label: {
            show: false,
            textStyle: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#00f4fe'
            },
            positionX: 5
        },
        circleSize: 5,
    },
    series: [
        {
            name: '花费',
            type: 'bar',
            data: [[220, 1450], [50, 1000], [100, 1500]],
        }
    ],
    color: ["#3fffa7", "#3f90ff"],
};
// setTimeout(() => {
//     chart.setOption(option2)
// }, 2000)
// setTimeout(() => {
//     chart.setOption(option)
// }, 4000)