echarts使用心得（柱状图）

柱状图的使用
使用最新的echarts版本，引入script文件

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>

html中放置一个div便可
js：

var myselect = document.getElementById("yearSelectzhibiao");　　//获取select对象
var option = {
                tooltip: {
                    trigger: 'axis',
                },
                // 修改图表位置大小
                grid: {
                    left: '0%',
                    top: '25px',
                    right: '0%',
                    bottom: '15%',
                    containLabel: true
                },
                legend: {
                    data: ['###', '###'],
                    top: 0,
                    left: 10,
                    // 小图标的宽度和高度
                    itemWidth: 10,
                    itemHeight: 10,
                    // 修改图例组件的文字为 12px
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "10"
                    }
                },
                calculable: true,

                // x轴相关配置
                xAxis: [{
                    type: 'category',
                    data: pros,                    
                    axisTick: {
                        alignWithLabel: true
                    },
                    // 修改刻度标签，相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,0.8)",
                        fontSize: 10,
                        interval: 0
                    },
                    // x轴样式不显示
                    axisLine: {
                        show: false
                    }
                }],
                // y轴相关配置
                yAxis: [{
                    type: 'value',
                    // 修改刻度标签，相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,0.6)",
                        fontSize: 10
                    },
                    // y轴样式修改
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color: "rgba(255,255,255,0.6)",
                            width: 2
                        }
                    },
                    // y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,0.1)"
                        }
                    }
                }],
                series: [{
                    name: '###',
                    type: 'bar',
                    data: fins,
                    color: '#AE57A4'
                },
                    {
                        name: '###',
                        type: 'bar',
                        data: alls,
                        color: '#9fe6b8'
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // 4.让图表随屏幕自适应
            window.addEventListener('resize', function () {
                myChart.resize();
            })