需求:对比课程通过率最高的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. Bootstrsp 表单

    摘要:bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.本文主要对这三种表单布局做一下基础的介绍,以及对表单控件做简要概括. 1.垂直表单 垂直表单也称基础表单.其基本结构如下: & ...

  2. Java并发程序设计(三) Java内存模型和线程安全

    Java内存模型和线程安全 一 .原子性 原子性是指一个操作是不可中断的.即使是在多个线程一起执行的时候,一个操作一旦开始,就不会被其它线程干扰. 思考:i++是原子操作吗?  二.有序性 Java代 ...

  3. Monte Carlo计算Pi,python实现

    Monte Carlo import random import matplotlib.pyplot as plt import numpy as np 6 # 函数模拟点的随机掉落,并分为两组 de ...

  4. 服务器被ddos攻击?分析如何防止DDOS攻击?

    上周知名博主阮一峰的博客被DDOS攻击,导致网站无法访问而被迫迁移服务器的事情,引起了广大网友的关注及愤慨,包括小编的个人博客也曾接受过DDOS的“洗礼”,对此感同身受.所以,本文我们一起来了解下DD ...

  5. Java基础-多线程-③线程同步之synchronized

    使用线程同步解决多线程安全问题 上一篇 Java基础-多线程-②多线程的安全问题 中我们说到多线程可能引发的安全问题,原因在于多个线程共享了数据,且一个线程在操作(多为写操作)数据的过程中,另一个线程 ...

  6. c++中string类对象和字符数组之间的相互转换

    string类在c++中是一个模板类,位于名字空间std中,注意这里不是string.h,string.h是C字符串头文件. 将string类型转换为字符数组char arr[10];string s ...

  7. Java Web开发总结(一)

    1.如何解决 tomcat 中文乱码问题? 2.如果某个Servlet的映射路径仅仅为一个正斜杠(/),那么这个Servlet就成为当前Web应用程序的缺省Servlet. <!-- 将Serv ...

  8. hash bucket

    什么是bucket bucket的英文解释: Hash table lookup operations are often O(n/m) (where n is the number of objec ...

  9. 【T08】避免重新编写TCP

    1.有时候为了所谓的性能,我们倾向于使用udp,但是我们又期望数据的传输是可靠的,因此需要在应用层提供可靠性. 2.可靠.健壮的udp必须提供: a.在合理的时间内没有收到回复,进行重传 b.保证应答 ...

  10. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...