通过Echarts可以实现柱状图组，如下图：是一个学生三次模考成绩对比结果

源码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="js/echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script>

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title : {

                text: '模考分数对比',

                subtext: '纯属虚构'

            },

            tooltip : {

                trigger: 'axis'

            },

            legend: {

                data:['一模','二模','三模']

            },

            toolbox: {

                show : true,

                feature : {

                    dataView : {show: true, readOnly: false},

                    magicType : {show: true, type: ['line', 'bar']},

                    restore : {show: true},

                    saveAsImage : {show: true}

                }

            },

            calculable : true,

            xAxis : [

                {

                    type : 'category',

                    data : ['数学','语文','英语','综合']

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    name:'一模',

                    type:'bar',

                    data:[78, 80, 87, 93],

                    color:'#CC0066'

                },

                {

                    name:'二模',

                    type:'bar',

                    data:[90, 77, 62, 76],

                    color:'#009999'

                },

                {

                    name:'三模',

                    type:'bar',

                    data:[91, 78, 87, 89],

                    color:'#FFCC33'

                }

            ]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

上图是一个横坐标为种类，纵坐标为值的图形，如果需要将坐标轴互换，只需要xAixs与yAixs中的type参数即可

修改后的效果图如下：

Echarts 柱状图组的更多相关文章

  1. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  2. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  3. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  4. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  5. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  6. echarts柱状图个数多，横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  7. Flask插件wtforms、Flask文件上传和Echarts柱状图

    一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...

  8. Echarts 柱状图配置详解

    1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...

  9. ECharts柱状图

    首先我们要先去Echarts 官网 根据自己需要的版本进行下载下载 下载完成后,我们在项目中引入echarts 随后创建容器来存放我们要添加的柱状图 容器创建完毕我们需要在js中设置他的属性和值 此配 ...

随机推荐

  1. [日常] Redis中set集合的使用思考

    公司部门同事有个需求,就是需要把当前另一个部门a中存储的数据全部导出来,自己当前业务b的数据全部导出来,两个要取一下差集,把a中存在,b中不存在的记下来,要去调用某接口把对应的文件删除.这个我感觉可以 ...

  2. ACM-ICPC 2018 沈阳赛区网络预赛 J. Ka Chang（树上分块+dfs序+线段树）

    题意 链接:https://nanti.jisuanke.com/t/A1998 给出一个有根树(根是1),有n个结点.初始的时候每个结点的值都是0.下面有q个操作,操作有两种,操作1.将深度为L(根 ...

  3. C学习笔记（7）--- typedef,输入输出

    1.typedef: C 语言提供了 typedef 关键字,您可以使用它来为类型(type)取一个新的名字. 比如: typedef unsigned char BYTE; 然后你就可以把BYTE当 ...

  4. pyhton【flask接口开发】

    使用flask进行接口开发 语言:Python3 框架:flask 在进行开发前首先得安装flask,然后才能使用.安装可以直接使用pip命令进行安装:pip install flask. 使用fla ...

  5. 设置了相对定位relative之后，改变top值，如何去掉多余空白？

    众所周知,relative和absolute有一个区别在于relative是相对自身定位,而absolute是相对于最近的定位父级定位,而此时的相对定位经过top值改变其在文档流中的位置之后,自身本来 ...

  6. 七，专著研读（Logistic回归）

    七,专著研读(Logistic回归) 分类:k-近邻算法,决策树,朴素贝叶斯,Logistic回归,支持向量机,AdaBoost算法. 运用 k-近邻算法,使用距离计算来实现分类 决策树,构建直观的树 ...

  7. 第十三周博客作业 <西北师范大学| 周安伟>

    第十三周助教作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 本周点评作业数量无 本周点评困难的博客作业无 本周工作情况制作实验七 团队作业3的千帆图和成绩排名 ...

  8. python27期JavaScript：

    JavaScript:(简称“JS”) 是一种轻量级的编程语言(ECMAscript5或6)是一种解释性脚本语言(代码不进行预编译)主要用来向HTML页面添加交互行为JavaScript 是互联网上最 ...

  9. 线上问题排查利器Arthas

    官方文档 下载arthas-boot.jar,然后用java -jar的方式启动: curl -O https://alibaba.github.io/arthas/arthas-boot.jar j ...

  10. 【day09】PHP

    一.函数 1. 作用域(Scope) (1)局部变量:变量在声明的代码段中有效 a.动态变量 b.静态变量:static ,用在函数中,当调用函数后内存不释放,能存储变量的最后的值. (2)全局变量: ...