Echart自定义属性3
echart:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
<body>
<div class="chart_content">
<div id="container" style="width: 400px;height: 300px"></div>
</div> <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
color: ['#aac13d'], //Y轴字的颜色
//设置字体样式
textStyle: {
fontSize: 14,
fontWeight: 700
},
grid: {
top: '3%',
bottom:'0',
left:'0',
right:'3%',
containLabel: true
},
xAxis: {
axisTick: {
show: false //去掉x轴刻度
},
splitLine: {
show: true,
lineStyle: {
// 使用深浅的间隔色
color: ['#ffddc9']
}
},
boundaryGap: false,
data: [76,77,78,79,80,81,82,83,84,85],
axisLine:{
symbol:['none','arrow'],//X轴箭头
lineStyle:{
color:'#ea3076', //x轴颜色
width:1,//这里是为了突出显示加上的
}
},
},
yAxis: {
axisTick : {show: false},//去掉刻度
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#ffddc9']
}
},
min:0,
max:100,
axisLabel:{ //修改y轴的数据
formatter: function (value) {
var texts = [];
if(value==0){}
else if(value<=20){
texts.push('不佳');
}
else if (value <=40) {
texts.push('略差');
}
else if (value <= 60) {
texts.push('普通');
}
else if(value <= 80){
texts.push('不错');
}
else{
texts.push('很好');
}
return texts;
}
},
//设置轴线的属性
axisLine:{
symbol:['none','arrow'],//Y轴箭头
lineStyle:{
color:'#e9386f',
width:1,//这里是为了突出显示加上的
}
},
},
series: [{
data: [35,45,25,35,65,85,40,35,45,35],
type: 'line',
smooth: false,//true 为平滑曲线，false为直线
// areaStyle: {} //背景填充颜色
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script> </body>
</html>
效果图：
Echart自定义属性3的更多相关文章
- EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- Android自定义控件之自定义属性
前言: 上篇介绍了自定义控件的基本要求以及绘制的基本原理,本篇文章主要介绍如何给自定义控件自定义一些属性.本篇文章将继续以上篇文章自定义圆形百分比为例进行讲解.有关原理知识请参考Android自定义控 ...
- EChart使用
EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...
- Android自定义属性简单使用说明
原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_attrs.html 本文从实用角度说明Android自定义属性的基本使用流程,清晰 ...
- 网站中使用echart
在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...
- 防御CSRF的方法有哪些（一） HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击
CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下 ...
- EXT.NET 使用总结（2） ---TreePanel(带右键菜单，节点自定义属性)
TreePanel(带右键菜单,节点自定义属性) 其实这个树控件也挺好用的.http://www.ztree.me/v3/main.php#_zTreeInfo html <ext:Panel ...
- Android自定义属性
上一篇讲解了Android自定义View,这篇来讲解一下Android自定义属性的使用,让你get新技能.希望我的分享能帮助到大家. 做Android布局是件很享受的事,这得益于他良好的xml方式.使 ...
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
随机推荐
- JPA with Hibernate implementation
https://code.google.com/p/jpa-basics-tutorial/source/checkout http://alextretyakov.blogspot.com/2013 ...
- outlook更改邮件存储路径
由于司邮箱容量磁盘配额很小,没收几封邮件就提示邮箱容量已满请删除不重要的邮件很是烦人,于是乎就想着怎么把邮件存到本地然后自动删除服务器上的邮件不做备份,这样就不会在提示邮箱容量已满了,就不用担心发不出 ...
- MyBatis 查询缓存
增删改操作对一级缓存的影响:增删改操作都会清空一级缓存,无论是否提交
- 【BZOJ4154】Generating Synergy【kd树】
题意 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点染成c,或询问点a的颜色 分析 我们以dfs序为横坐标,深度为纵坐标,建kd树.我们每次更新,都是在kd树中更 ...
- Element DatePicker日期范围选择
前7天后7天 <el-date-picker v-model="value1" type="date" :picker-options="pic ...
- strip命令
去掉文件里调试和符号信息,文件大小变小,一般在发布的时候使用. 主要作用于可执行文件,动态库,目标文件等. 可参考:http://blog.csdn.net/stpeace/article/detai ...
- vmware虚拟机开机报附件中的错误的解决办法
Virtualized Inter VT-x/EPT is incompatible with this virtual machine configuration 在没有虚拟化msg.inter.h ...
- JAVA高并发线程
一.JAVA高级并发 1.5JDK之后引入高级并发特性,大多数的特性在java.util.concurrent 包中,是专门用于多线程发编程的,充分利用了现代多处理器和多核心系统的功能以编写大规模并发 ...
- 模拟在table中移动鼠标，高亮显示鼠标所在行，固定表头
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- DataStage 错误集(持续更新)
DataStage 错误集(持续更新) DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 D ...