通过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. ntp服务设置开机自启动失败

    设置了ntpd开机自启动,重启服务器ntpd没有自启动 1.需要禁掉chronyd.service: systemctl disable chronyd.service 2.手动启动ntpd: sys ...

  2. easyui入门

    什么是easyui! easyui=jquery+html4(用来做后台的管理界面) 1.通过layout布局 我们先把该导的包导下 然后就是JSP页面布局 2.通过tree加载菜单 先来一个实体类 ...

  3. git clone克隆代码显示“无权限或者确认存储库是否存在”

    今天我用公司的电脑要继续完成我自己的git上的小项目的时候,发现git clone失败,提示 然后我在公司电脑上生成公钥感觉又太麻烦了 网上找了个好方法就是把自己电脑上的.ssh文件夹拷贝到公司电脑上 ...

  4. LinkCutTree学习笔记

    LinkCutTree 学习笔记 参考来源 https://www.zybuluo.com/xzyxzy/note/1027479 https://www.cnblogs.com/zhoushuyu/ ...

  5. [LeetCode] 84. Largest Rectangle in Histogram 直方图中最大的矩形

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  6. springboot项目POM文件第一行报错 Unknown Error

    改成 war 不错了,但是打包麻烦 pom 文件报错 UnKnown Error第一次碰到这个问题,花了几个小时才解决,除了UnKnown 没有任何提示.网上搜的大部分情况都不是我遇到的. 还是没有解 ...

  7. python asyncio 关闭task

    import asyncio import time async def get_html(sleep_times): print("waiting") await asyncio ...

  8. python语法01

    在某.py文件中调用其他.py文件中的内容. 全局变量的使用. 线程的使用. if name == 'main': 的作用 新建两个python脚本文件 f1File.py ""& ...

  9. HTTPS免费证书

    HTTPS 证书 一: 利用 cerbot 本地服务器 申请免费可用的证书.缺点就是三个月需要手动换一次 官网: https://certbot.eff.org/lets-encrypt/ubuntu ...

  10. Spring笔记01

    spring 第一章 Spring模块规划图 核心架包 spring-beans-4.0.0.RELEASE. spring-core-4.0.0.RELEASE. spring-context-4. ...