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提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
随机推荐
- $(function(){})理解
$(function(){}) = jQuery(function(){}) = jQuery(document).ready(function(){ });
- consul service
{ "name": "consul-agent (host:{{ .MONITOR_CONSUL }})", "command&q ...
- Docker配置mysql互为主从
配置准备 两台机器 两台机器:A(193.168.10.101) B(193.168.10.102) 做好ssh免密登录 mysql大版本需要一致,小版本可忽略 并且两台机器已经安装好了docker ...
- 为Eclipse安装功能扩展插件
---------siwuxie095 关于 Eclipse 的下载.安装与配置,详见本人博客分类:利剑出鞘, 里面的 Eclipse的配置 本人博客( ...
- 使screen支持滚动
在Linux中,常用的串口工具有minicom和screen,minicom可能使用得比较多,但是我比较喜欢screen,因为它的输出是彩色的,更舒服.更能突出重点. 使用screen来打开串口也非常 ...
- C和C++中的不定参数
在初学C的时候,我们都会用到printf函数来写Hello World的程序.在我们看printf函数的声明时,会看到类似于下面代码 int printf(const char * __restric ...
- loadrunner12--学习中遇到疑问及解释
1.analysis里面,平均事务响应时间,平均事务响应时间+运行vuser,两个图的数据有区别是什么原因? 答: 请仔细查看以下两张图,其实两张图的数据是没有区别的. 之所以我们认为他们二者的数据有 ...
- Python服务器开发 -- 网络基础-乾颐堂
网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. HTTP是高层协议,而TCP/IP是个协议集,包过许多的子协议.包括:传输层的 FTP,UDP,TCP协议等,网络层的ip ...
- qt学习(三) qt布局
使用横向与竖向.网格三种布局嵌套使用后可以组合出很复杂的界面. 这里向大家推荐这篇博客 http://www.cnblogs.com/Bonker/p/3454956.html 我这里使用布局做了一个 ...
- CTF中的变量覆盖漏洞
https://www.cnblogs.com/bmjoker/p/9025351.html 原 作 者:bmjoker出 处:https://www.cnblogs.com/bmjoker/p/ ...