Echarts之柱形图

最新推荐文章于 2024-06-25 15:34:07 发布

xinxin_zhu

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量321

点赞数

分类专栏： Echarts html 文章标签： Echarts 图表

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/84869910

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Echarts

4 篇文章 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>

xinxin_zhu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts之柱形图

需要引入 &lt;script src="js/jquery.js"&gt;&lt;/script&gt;&lt;script src="js/echarts.js"&gt;&lt;/script&gt;&lt;body&gt;&lt;div id="charts" style="min-width:150px;min-height:15
复制链接

扫一扫

专栏目录