需求:对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率

http://echarts.baidu.com/echarts2/doc/example/bar1.html

option = {
title : {
text: '学院课程获得学分率对比统计',
subtext: '绿色柱:通过率由高到低;蓝色柱:本学院课程平均获得学分率;红色柱:挂科率由高到低'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['获得学分率']
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false, readOnly: false},
magicType : {show: false, type: ['line', 'bar']},
restore : {show: false},
saveAsImage : {show: false}
}
},
calculable : true,
xAxis : [
{
type : 'category',
axisLabel: {
interval: 0,
rotate: 40
},
data : ['高数1','高数2','高数3','高数4','高数5','高数6','高数7','高数8','...','全部课程','...','大学英语1','大学英语2','大学英语3','大学英语4','大学英语5','大学英语6','大学英语7','大学英语8']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} %'
}
}
],
series : [ {
name:'获得学分率',
type:'bar',
barWidth:30,
itemStyle: {
normal: {
color: function(params) {
console.log(params);
// build a color map as your need.
var colorList = [
'#9BCA63', '#9BCA63', '#9BCA63', '#9BCA63', '#9BCA63', '#9BCA63','#9BCA63', '#9BCA63',
'#27727B','#27727B','#27727B',
'#C1232B','#C1232B','#C1232B','#C1232B','#C1232B','#C1232B','#C1232B','#C1232B'
];
return colorList[params.dataIndex]
}
}
},
data:[100, 100, 100, 100,100,100,100,100,0,95.4,0, 58.5, 48.2,58.5, 48.2, 38.7, 24.8, 16.0, 5.3]
}
]
};

[echarts] 同指标对比柱状图的更多相关文章

  1. echarts 圆形图、柱状图

    首先引入echarts的js包 <script type="text/javascript" src="js/esl.js"></script ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.

    今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...

  4. Echarts动态加载柱状图和折线图混合展示的实例

    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...

  5. Echarts动态加载柱状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  6. Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.  本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...

  7. echarts入门1【柱状图/饼图】

    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...

  8. Echarts 有点难度的柱状图

    本次的难点在于交叉传数据,又要把四组20个不同日期 显示上! 先看效果图: 数据传递方式:图 function func_echarts_2ba() { var echarts_2bar = echa ...

  9. MPchartAnadroid的对比柱状图

    1.导入三方jar包(可参照) MPAndroidChart(GitHub上优秀得图表功能库) MPAndroidChart常见设置属性(一)——应用层 2.布局activity_main.xml(这 ...

随机推荐

  1. [NOIp2007提高组]矩阵取数游戏

    OJ题号:洛谷1005 思路: 动态规划. 不难发现每行能够取得的最大值仅与当前行的数据有关,因此本题可以对每行的数据分别DP,最后求和. 设$f_{i,j}$表示左边取$i$个.右边取$j$个的最大 ...

  2. 关于redis与memcached区别(转载自stackoverflow)

    转载自:http://stackoverflow.com/questions/10558465/memcached-vs-redis Updated 10/9/2014 Today marks the ...

  3. 简单的运动学,用canvas写弹力球

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...

  4. [Visual Studio] NuGet发布自定义包(Library Package)

    源文章:dax.net http://www.cnblogs.com/daxnet/archive/2013/05/07/3064577.html 使用NuGet发布自己的类库包(Library Pa ...

  5. 转:甲骨文发布大数据解决方案 含最新版NoSQL数据库

    原文出处: http://www.searchdatabase.com.cn/showcontent_88247.htm 以下是部分节选: 最新发布的大数据创新成果包括: Oracle Big Dat ...

  6. 封装PHP验证码方法

    /** * 生成验证码 * @param integer $width 图片宽度 * @param integer $height 图片高度 * @param string $type 验证码类型 * ...

  7. 在ASP.NET Core2.0中使用百度在线编辑器UEditor(转)

    一.起因 UEditor是百度旗下的富文本编辑器,对于后端上传处理仅提供了Asp.Net 版的支持. 如果想在.Net Core项目中使用,那么后台上传接口需要重构. UEditorNetCore:百 ...

  8. 浅谈压缩感知(二十一):压缩感知重构算法之正交匹配追踪(OMP)

    主要内容: OMP的算法流程 OMP的MATLAB实现 一维信号的实验与结果 测量数M与重构成功概率关系的实验与结果 稀疏度K与重构成功概率关系的实验与结果 一.OMP的算法流程 二.OMP的MATL ...

  9. [Python设计模式] 第11章 迪米特法则——最少知识原则

    github地址:https://github.com/cheesezh/python_design_patterns 迪米特法则 迪米特法则(LoD),也叫最少知识原则,如果两个类不必彼此直接通信, ...

  10. 自建Kubernetes logtail日志采集客户端安装方式

    自建Kubernetes安装方式 前提条件 Kubernetes集群版本1.8及以上. 已经安装Helm命令,版本2.6.4及以上. 安装步骤 在日志服务控制台创建一个Project,Project名 ...