Echarts之柱形图

冷不防 2021-09-17 05:28 369阅读 0赞

需要引入

<body>
    <div id="charts" style="min-width:150px;min-height:150px;height:100%;height:100%"></div>
    </body>
    
    <script>
    function fnCharts(){
        var Chart = echarts.init(document.getElementById('charts'));         
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    backgroundColor: '#91a9e1',  //提示框背景颜色
                    textStyle: {
                        color: '#0f152f' //提示框中字体颜色
                    }
                },
                legend: { 
                    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                   // 'horizontal' ¦ 'vertical'               
                    x: 'right',  //图例位置 x y方向 有 top right left bottom center
                    y:'top',
                    icon: 'circle',//图例图标形状 eg stack..可以自定义 给一个图片路径          
                    data: ['上海', '北京'], 
                    textStyle: {
                        color: '#a0b5d4' //图例文字颜色
                    }
                },
              
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true,              
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['自行车', '电动车', '小汽车', '大卡车'],
                        axisTick: false, //X轴不显示分割线
                        axisLabel: {     //x轴文字设置
                            show: true,
                            textStyle: {       
                                color: '#a0b5d4'   //x轴文字颜色
                            }
                        },                  
                        splitLine:{
                            show:false //是否显示 x轴网格线
                        },
                        axisLine: {            // 坐标轴线                     
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#254872'
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',                  
                        axisLabel: {
                            textStyle: {
                                color: '#a0b5d4'
                            },
                            formatter: function (v) {
                                return v
                            }
                        },
                        axisTick: false, //不显示分割线
                        splitLine: {
                            show: false //不显示y轴网格线
                        },
                        textStyle: {
                            color: '#a0b5d4'
                        },
                      
                        axisLine: {            // 坐标轴线                    
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#254872'
                            }
                        },
                        //max: 400, //设置柱子的高度
                    },
                   
                ],
                series: [
                    {
                        name: '上海',
                        type: 'bar',
                        //stack: '堆叠'， //相同的stack 柱子堆叠一起
                        barWidth: '35%',  //柱子宽度
                        barGap: 0,
                        data: [10,20,30,40]
                    },
                    {
                        name: '北京',
                        type: 'bar',
                        //stack: '堆叠'， //相同的stack 柱子堆叠一起
                        barWidth: '35%',
                        data: [10,20,30,40]
                    },
    
                ],
                color: ['#ffae00', '#0d7dfa']  //设置柱子颜色 依次对应匹配
            };
            Chart .setOption(option);
            window.onresize = Chart.resize;  //自适应屏幕大小
    }
    </script>