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 ...
随机推荐
- 同一台机子上用多个git 账号
Step 1 - Create a New SSH Key We need to generate a unique SSH key for our second GitHub account. 1 ...
- mac系统下mysql开机启动总是3307
修改了mysql的my.cnf可还是不行,启动后就是3307,必须关掉再启动. 觉得可能是mac系统在哪里写死了开机启动项. http://queforum.com/mysql/1012987-mys ...
- Leetcode Copy List with Random Pointer
A linked list is given such that each node contains an additional random pointer which could point t ...
- [Leetcode] Roman to Integer
Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...
- 单元测试 逃不开的Done 与约定
关注单元测试有一段时间了,也做了些尝试然后就停了下来,寻找框架.方法.各种尝试 看得多,尝试的少, 关于框架分为两类,1是自动化测试工具类,1是js单元测试框架 关于自动化测试工具我尝试了http:/ ...
- 摘要: Linux下which、whereis、locate、find命令的区别
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which ...
- phpcms无刷新分页
控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 ...
- CNUOJ 0576 加油
40017074加油 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 你需要驾驶一辆汽车行驶S个单位的距离.最开始汽车上有P个单 ...
- IOS网络第二天 - 07-发送JSON给服务器
*************** #import "HMViewController.h" #import "MBProgressHUD+MJ.h" @inter ...
- JQUERY attr prop 的区别 一个已经被淘汰
在做jquery 全选 全不选的项目中, 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) ...