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 ...
随机推荐
- CodeForces462 A. Appleman and Easy Task
A. Appleman and Easy Task time limit per test 1 second memory limit per test 256 megabytes input sta ...
- 【Linux】df命令 ，查看磁盘容量。
Oracle 导库时,失败,原因为磁盘满了, 记录下查看磁盘容量的指令 1．命令格式: df [选项] [文件] -a 全部文件系统列表 -h 方便阅读方式显示 -H 等于“-h”,但是计算式,1K= ...
- Web服务器基础学习
1)Socket通信相当于两个人通过电话联系,Http协议相当于电话联系时所使用的中文2)Http1.1前均为短连接,1.1版本为长连接,即服务器接收一次请求并发送响应后会等待一段时间看浏览器是否在这 ...
- 关于rc.local
1.rc.loacl的启动 /etc/rc.d/rc.local
- Unity学习疑问记录之触摸点坐标
Vector3 pos=Camera.main.ScreenToWorldPoint(Input.GetTouch(0).position); 类似的鼠标点击Camera.main.ScreenToW ...
- 如何通过apk获得包名及Activiy 名称
一.使用重签名工具Robotium
- Spring boot 学习记录
java的三种配置方式 基于xml的配置 基于注解的配置 基于java的配置 Spring boot推荐的配置方式:java配置+注解配置 一.注解 SpringBootApplication :等价 ...
- 分享一个前辈的NPOIhelper
即拿即用: 首先要下载npoi的dll,此不赘述,接着添加引用: using NPOI.HPSF; using NPOI.HSSF.UserModel; using NPOI.SS.UserModel ...
- springMVC、httpClient调用别人提供的接口！！！（外加定时调用）
import com.ibm.db.util.AppConfig; import com.ibm.db.util.JacksonUitl; import org.apache.http.HttpEnt ...
- java并发编程-基础
线程带来的风险 安全性:多线程操作执行顺序的不可预测性 -- 永远不发生糟糕的事情: 活跃性:代码无法得到执行,死锁.饥饿问题 -- 某件正确的事情最终会发生: 性能问题:活跃性只意味着某件事最终会发 ...