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 ...
随机推荐
- iOS--NSTimer设置定时器的两种方法
//方法一: //创建定时器 NSTimer *timer=[NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(next ...
- XD, XR, DR 股票
股权登记日与除权除息日 所以,如果投资者想得到一家上市公司的分红.配股权,就必须弄清这家公司的股权登记日在哪一天,否则就会失去分红.配股的机会. 股权登记日后的第一天就是除权日或除息日,这一天或以后购 ...
- C# 词法分析器（五）转换 DFA
系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 在上一篇文章中,已经得到了与正则表达式等价的 NFA ...
- 【DP】HDU 1087
HDU 1078 Super Jumping! Jumping! Jumping! 题意: 有这么个游戏,从start到end(自己决定在哪停下来)连续跳圈,中间不能空一个圈不跳,圈里的数字必须比你上 ...
- 基于FS4412的DS18B20温度采集编程实现（1-时序分析）
作者:秦老师,华清远见嵌入式学院讲师. 一.DS18B20简介 DS18B20是常用的数字温度计.DS18B20数字温度计提供9至12位(可配置)温度读数,表明该设备的温度. 信息通过单总线接口被发送 ...
- 如何解决Linux下通过root无法远程登录
解决问题 1.确认ssh服务已安装,通过普通用户连接成功: 2.确认ssh配置是否对root进行特殊设置,修改/etc/ssh/sshd_config文件中 PermitRootLogin witho ...
- ios7迎来完美越狱，果粉狂欢！
[我要]最近一则iOS7可以完美越狱的消息,可是乐坏了期待已久的果粉们.据科技博客网站Gizmodo报道,越狱专家Evasi0n团队最近攻破苹果的 iOS7系统,赶在圣诞前发布了iOS7的越狱.消息一 ...
- [IOS] 利用@IBInspectable
某些uiview中设置 这个关键字 IBInspectable 可以让其设置的属性,在右侧的属性栏目里面进行直接设置, 这是最近看了一下wwdc的一个视频学习到的,可以方便的进行 UI的测试,
- 第 12 章 Ajax
学习要点:1.Ajax 概述2.load()方法3.$.get()和$.post()4.$.getScript()和$.getJSON()5.$.ajax()方法6.表单序列化 Ajax 全称为:“A ...
- XmlUtils.java
package com.vcredit.framework.utils; import java.io.Writer; import org.apache.commons.lang3.StringUt ...