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 ...
随机推荐
- XAMPP PHPSTORM XDEBUG 配合使用
1.xdebug 配置 安装完xampp 进入 php.ini [XDebug]zend_extension = "C:\xampp\php\ext\php_xdebug.dll" ...
- nodejs 提示‘xxx’ 不是内部或外部命令解决方法
本文介绍了node.js包管理工具npm安装模块后,无法通过命令行执行命令,提示‘xxx’ 不是内部或外部命令的解决方法,给需要的小伙伴参考下. 一般出现这样的问题原因是npm安装出现了问题,全局 ...
- Hello Java
用记事本或者Eclipse编写如下代码 public class JavaAPP{ public static void main(String[] args){ System ...
- 对于amqplib的使用心得
最近在nodejs使用了amqplib--rabbitmq的nodejs客户端.封装在了express中,先来代码. var amqp = require('amqplib/callback_api' ...
- chart.js 里添加图表的清单：
chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...
- Android四大组件之actiivity
1.Acitivity Activity是Android一个非常重要的用户接口(四大组件之一),是可见的,主要是用户和应用程序之间进行交互的接口.在每个Activity中都可以放很多控件,所以也可以把 ...
- ThinkPHP 3.2.3 使用 Swift Mailer 邮件系统发送邮件
SwiftMailer 下载地址:https://github.com/swiftmailer/swiftmailer 版本:swiftmailer-5.x 把压缩包解压到 /ThinkPHP/Lib ...
- mysql5.1升级到mysql5.6
这么大跨度的升级,本身不推荐.升级应该是循序渐进的,以防止不兼容.如果确实要这么做,你先要确保你的客户端管理工具要能兼容,比如phpmyadmin,此次升级依然存在一个问题,mysql server和 ...
- Codeforces554A:Kyoya and Photobooks
A. Kyoya and Photobooks Time Limit: 2000ms Memory Limit: 262144KB 64-bit integer IO format: %I64d ...
- Swift 必备开发库10个
1.CryptoSwift swift加密库, 支持md5,sha1,sha224,sha256... github地址: https://github.com/krzyzanowskim/Crypt ...