[echarts] 同指标对比柱状图
需求:对比课程通过率最高的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] 同指标对比柱状图的更多相关文章
- echarts 圆形图、柱状图
首先引入echarts的js包 <script type="text/javascript" src="js/esl.js"></script ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.
今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...
- Echarts动态加载柱状图和折线图混合展示的实例
一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...
- Echarts动态加载柱状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
前言 上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. 本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...
- echarts入门1【柱状图/饼图】
这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...
- Echarts 有点难度的柱状图
本次的难点在于交叉传数据,又要把四组20个不同日期 显示上! 先看效果图: 数据传递方式:图 function func_echarts_2ba() { var echarts_2bar = echa ...
- MPchartAnadroid的对比柱状图
1.导入三方jar包(可参照) MPAndroidChart(GitHub上优秀得图表功能库) MPAndroidChart常见设置属性(一)——应用层 2.布局activity_main.xml(这 ...
随机推荐
- 暴力破解ZIP文件密码
Python 的标准库提供了 ZIP 文件的提取压缩模块 zipfile,现在让我们试着用这个模块,暴力破解出加密的 ZIP 文件!我们可以用 extractall()这个函数抽取文件,密码正确则返回 ...
- Python学习——web框架
对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. WSGI(Web Server Gateway Interface)是一种规范,它定义了使用p ...
- 每日踩坑 2019-04-08 VS2015未能找到路径“…\bin\roslyn\csc.exe”的解决方案
使用 Nuget 安装 Microsoft.CodeDom.Providers.DotNetCompilerPlatform 包即可. VS2017都是用 roslyn 编译, VS2015原本的编译 ...
- Chrome 浏览器的Secure Shell插件
说起putty,windows下面的程序猿个个都是爱恨交加. 不小心发现一个宝贝,Chrome 浏览器的Secure Shell插件. 这是Google官方推出的插件,试用下来,putty完全可以下岗 ...
- 2016年3月11日Android实习日记
1.明天删除orthodotics_design_animation_content_gif.gif文件.(已完成) 2. 如何检测内存泄露? A: 可以通过一些性能监测分析工具,如 JProfile ...
- 在现实面前,IT从业者的无奈
话题:在中国,有多少程序员干到40了? 作者:匿名用户 链接:https://www.zhihu.com/question/33953081/answer/349839986 学历低,计算机理论不高, ...
- oracle data integrator与大数据平台的集成
在最新版本的ODI中,通过使用各种知识模块,可在统一的界面上实现对传统数据库.hive, pig, spark, hdfs等的ETL操作,满足在同一系统或采用相同的方式实现ETL功能. 详细的内容可参 ...
- .net core 3.0中可以使用gRPC了
今天发现.net core下有gRPC模板了,这个可是补全了.net core下高性能RPC框架缺失这一大短板了. 使用模板创建了工程后,发现连客户端的示例也创建了. 更加给力的是,IDE是能直接识别 ...
- 最近无意中看到一个讲解spring mvc的系列,从源码的角度讲解,特记录下来,供以后反复学习
SpringMVC深度探险(一) —— SpringMVC前传 SpringMVC深度探险(二) —— SpringMVC概览 SpringMVC深度探险(三) —— DispatcherServle ...
- 数据分析系统DIY1/3:CentOS7+MariaDB安装纪实
打算通过实践.系统学习一下数据分析. 初步计划要完毕的三个任务. 一.用VMware装64位CentOS,数据库服务端用CentOS自带的就好. 二.数据採集与预处理用Dev-C++编程解决. 三.用 ...