echarts 图表应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>char - test</title>
<script src="./js/echarts.js"></script>
<style type="text/css">
.Bar{
float:top;
width:700px;
height:300px;
background:#093;
}
.Line{
float:top;
width:700px;
height:300px;
background:#808;
}
</style>
</head>
<body> <div id="chartBar" class="Bar"></div>
<div id="chartLine" class="Line"></div>
<script type ="text/javascript"> require.config
({paths:{echarts:'./js'}}); require(
[
'echarts','echarts/chart/bar'
], function(This){
var Width = 20;
var myChart = This.init(document.getElementById('chartBar'));
var option = {
tooltip:{
show:true
},
title:{
text:'课程分数统计-柱形图'
},
legend: {
data:["一班","二班","三班"]
},
xAxis:[
{
show: true,
type:'category',
data:["数学","语文","英语","历史","地理","生物"],
axisLabel:{
textStyle:{
color:"#006633"
}
}
}
],
yAxis:[
{
type:'value',
min:0,
max:100,
}
], series:[ {
type:'bar',
name:'一班',
barWidth:Width,
data:[50,20,30,70,20,95],
barGap:5,
itemStyle:{
normal:{
color:'#9933FF',
}
}
}, {
type:'bar',
name:'二班',
barWidth:Width,
data:[20,80,39,50,88,25],
itemStyle:{
normal:{
color:function(params){
return '#FF6600';
}
}
}
},
{
type:'bar',
name:'三班',
barWidth:Width,
data:[70,66,85,79,92,75],
itemStyle:{
normal:{
color:function(params){
return '#FFBB00';
}
}
}
}
]
};
myChart.setOption(option);
}
)
require(
[
'echarts','echarts/chart/line'
], function(psq){
var datas = new Array("数学","语文","英语","历史","地理","生物");
var score = new Array(50,20,30,70,20,95);
var myChart = psq.init(document.getElementById('chartLine'));
var option = {
tooltip:{
show: true
},
title:{
text:'课程分数统计-折线图'
},
legend:{
data:[
{
name:'分数',
textStyle:{
color:'#00c36c'
}
}
]
},
xAxis:[
{
show: true,
type:'category',
data:datas
}
],
yAxis:[
{
type:'value',
min:0,
max:100,
}
], series:[
{
type:'line',
name:'分数',
data:score
}
]
};
myChart.setOption(option);
}
) </script>
</body>
</html>
额外属性
calculable:true,
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
dataZoom:{show:true},
legend:{
data:[
{name:'优秀率(85%以上)'},
{name:'良好率(75%以上)'},
{name:'及格率(60%以上)'},
{name:'低分率(40%以下)'}
]
},
echarts 图表应用的更多相关文章
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签（axisLabel）折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- Echarts图表统计学习
史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
随机推荐
- 2016中国大学生程序设计竞赛 网络选拔赛 I This world need more Zhu
This world need more Zhu Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- 【原】iOS学习之应用程序的启动原理
最近看视频了解了一下应用程序的启动原理,这里就做一个博客和大家分享一下,相互讨论,如果有什么补充或不同的意见可以提出来! 1.程序入口 众所周知,一个应用程序的入口一般是一个 main 函数,iOS也 ...
- string类里find的用法
#include<bits/stdc++.h> using namespace std; typedef long long ll; //int INF=(1<<31)-1; ...
- 【BZOJ】3991: [SDOI2015]寻宝游戏
题意 给一个\(n\)个点带边权的树.有\(m\)次操作,每一次操作一个点\(x\),如果\(x\)已经出现,则\(x\)消失.否则\(x\)出现.每一操作后,询问从某个点开始走,直到经过所有出现的点 ...
- js模块化方案【转】
(function(){ var CENTER = new EvtCenter(); var Loaded={}; var Modules={}; function loadScript(name,u ...
- jpa语句报 org.springframework.dao.InvalidDataAccessApiUsageException: Parameter with that position [2] did not exist; nested exception is java.lang.IllegalArgumentException: Parameter with that position
@Query("SELECT area from Area AS area WHERE area.state=0 AND area.name like %?1% ")Area fi ...
- initWithCoder: 与initWithFrame:的区别
从nib中加载对象实例时,init:或initWithFrame:都不会调用.而是调用initWithCoder:怎么理解: 有时候,知道initWithFrame方法如何用,但是么有弄明白ini ...
- JavaScript简单的tabel切换2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery全选Prop（“check”，true）和attr("attr",true)区别
$scope.selectAll = false; //点击单选框的时候是不是全选 $scope.checkIsAll = function(){ var wipeCheckBoxObj = $(&q ...
- Javascript实现页面跳转的几种方式
概述 相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一 ...