需求:对比课程通过率最高的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. 暴力破解ZIP文件密码

    Python 的标准库提供了 ZIP 文件的提取压缩模块 zipfile,现在让我们试着用这个模块,暴力破解出加密的 ZIP 文件!我们可以用 extractall()这个函数抽取文件,密码正确则返回 ...

  2. Python学习——web框架

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. WSGI(Web Server Gateway Interface)是一种规范,它定义了使用p ...

  3. 每日踩坑 2019-04-08 VS2015未能找到路径“…\bin\roslyn\csc.exe”的解决方案

    使用 Nuget 安装 Microsoft.CodeDom.Providers.DotNetCompilerPlatform 包即可. VS2017都是用 roslyn 编译, VS2015原本的编译 ...

  4. Chrome 浏览器的Secure Shell插件

    说起putty,windows下面的程序猿个个都是爱恨交加. 不小心发现一个宝贝,Chrome 浏览器的Secure Shell插件. 这是Google官方推出的插件,试用下来,putty完全可以下岗 ...

  5. 2016年3月11日Android实习日记

    1.明天删除orthodotics_design_animation_content_gif.gif文件.(已完成) 2. 如何检测内存泄露? A: 可以通过一些性能监测分析工具,如 JProfile ...

  6. 在现实面前,IT从业者的无奈

    话题:在中国,有多少程序员干到40了? 作者:匿名用户 链接:https://www.zhihu.com/question/33953081/answer/349839986 学历低,计算机理论不高, ...

  7. oracle data integrator与大数据平台的集成

    在最新版本的ODI中,通过使用各种知识模块,可在统一的界面上实现对传统数据库.hive, pig, spark, hdfs等的ETL操作,满足在同一系统或采用相同的方式实现ETL功能. 详细的内容可参 ...

  8. .net core 3.0中可以使用gRPC了

    今天发现.net core下有gRPC模板了,这个可是补全了.net core下高性能RPC框架缺失这一大短板了. 使用模板创建了工程后,发现连客户端的示例也创建了. 更加给力的是,IDE是能直接识别 ...

  9. 最近无意中看到一个讲解spring mvc的系列,从源码的角度讲解,特记录下来,供以后反复学习

    SpringMVC深度探险(一) —— SpringMVC前传 SpringMVC深度探险(二) —— SpringMVC概览 SpringMVC深度探险(三) —— DispatcherServle ...

  10. 数据分析系统DIY1/3:CentOS7+MariaDB安装纪实

    打算通过实践.系统学习一下数据分析. 初步计划要完毕的三个任务. 一.用VMware装64位CentOS,数据库服务端用CentOS自带的就好. 二.数据採集与预处理用Dev-C++编程解决. 三.用 ...