简单echars Demo

很容易从官网上找到这样一个案例

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 400, 150, 80, 70, 110, 130],
type: 'bar'
}]

};

右图显示效果：

当使用的时候，我们可以加些自己的特点和需求

1、在jsp页面中，我们需要加上展示插件的位置DIV；

</div>

2、在JS中

var myYcChart = echarts.init(document.getElementById('myBarByYc'));

//使用刚指定的配置项和数据显示图表。这里的option也就是上面的案例了

myYcChart.setOption(option);

记录下自己写的简单案例吧：

//机构统计
function getDataByJg(data){
var valueX = [];
var valueY = [];
for (var i = 0; i < data.length; i++) {
valueX.push(data[i].orgName);
if(data[i].sum !=0){
valueY.push(data[i].sum);
}
}
var myChart = echarts.init(document.getElementById('myBarByJg'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: valueX,
axisLabel :{
interval:0,
rotate:30,
textStyle:{
align:"right"
}
}
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
barWidth:25,
symbol: 'none',
data: valueY,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3fa7dc'
}, {
offset: 1,
color: '#0feae3'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
}
}],
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
},
color:['#A6FFFF'],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//异常统计
function getDataByYc(data){
var valueX = [];
var valueY = [];
valueX.push(data.spyc==0?null:data.spyc);
valueX.push(data.sbyc==0?null:data.sbyc);
valueX.push(data.fscb==0?null:data.fscb);
valueX.push(data.fqcb==0?null:data.fqcb);
valueX.push(data.ystp==0?null:data.ystp);
valueX.push(data.wpxj==0?null:data.wpxj);
valueX.push(data.zhyc==0?null:data.zhyc);
var myYcChart = echarts.init(document.getElementById('myBarByYc'));
optionYc = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['中国','美国','英国','法国','意大利,'日本','澳大利亚']
},
color:['#46A3FF'],
label:{
normal:{
show:true,
position: 'right',
textStyle:{
color:'black'
}
}
},
series: [
{
type: 'bar',
//data: valueX,
symbol: 'none',
data: valueX,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3fa7dc'
}, {
offset: 1,
color: '#0feae3'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
}
}
]
};
//使用刚指定的配置项和数据显示图表。
myYcChart.setOption(optionYc);
}

简单echars Demo相关推荐

Dubbo入门介绍---搭建一个最简单的Demo框架
Dubbo入门---搭建一个最简单的Demo框架置顶 2017年04月17日 19:10:44 是Guava不是瓜娃阅读数:320947 标签: dubbo zookeeper 更多个人分类: ...
java 基础api实现上传,上传文件到7牛云存储的java api一个简单的demo实现
最近在做一个项目,需要用到云存储,项目用的是七牛云.现在将项目过程中关于调用七牛云平台的java api来上传本地文件到七牛云空间的一个简单的demo展示给大家,希望对同样再用七牛云的童鞋们有所帮助. ...
Ibatis.Net 学习手记一简单的Demo
最近在做游戏推广的需求,趁公司给了不少充足的时间...再一次看了下自己以前学过的IbatisDemo,同时拿出来分享一下 Ibatis.Net的官方文档地址为 http://www.mybatis.o ...
c# MEF框架（一 MEF简介及简单的Demo）
转自:http://www.cnblogs.com/yunfeifei/p/3922668.html 在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibilit ...
两个简单的Demo示例向读者展示Flash和ASP.NET交互原理以及过程
ASP.NET与FLASH交互学习了ASP.NET的基础知识之后,终于等到学习交互的时候了.请大家和我一起来进行让人激动的交互吧!本章我将用两个简单的Demo示例向读者展示Flash和ASP.NET交 ...
input 模糊匹配功能文本框模糊匹配(纯html+jquery简单实现) demo
input 模糊匹配功能文本框模糊匹配(纯html+jquery简单实现) demo <!DOCTYPE HTML> <html lang="en"> & ...
Dubbo入门----搭建一个最简单的Demo框架
Dubbo背景和简介 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. 单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一起,以减少部署节点和成本. ...
android 观察者模式的简单demo,一个简单的demo彻底搞懂观察者模式
介绍观察者模式也被称为发布-订阅(Publish/Subscribe)模式,它属于行为型模式的一种.观察者模式定义了一种一对多的依赖关系,一个主题对象可被多个观察者对象同时监听.当这个主题对象状态变 ...
【unity】快速了解游戏制作流程-制作九宫格简单游戏demo
前言 hi~大家好呀!欢迎来到我的unity学习笔记系列~,本篇我会简单的记录一下游戏流程并且简单上手一个通过九宫格移动到指定位置的小游戏,话不多说,我们直接开始吧~ 本篇源自我看B站一位up主的视频 ...
iOS 类似微信,QQ聊天界面的气泡聊天简单实现Demo
以下是YYKit组件的源码分析,高级性能优化相关都在里面可以找到 YYwebImage超细源码分析 YYImage超细源码分析 YYModel源码分析YYText源码分析 12.27日更新:分析了一个 ...

简单echars Demo

简单echars Demo相关推荐

最新文章

热门文章