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的更多相关文章
	

    
								
  1. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象
		
    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
    
		
    2. 
						
  2. Android自定义控件之自定义属性
		
    前言: 上篇介绍了自定义控件的基本要求以及绘制的基本原理,本篇文章主要介绍如何给自定义控件自定义一些属性.本篇文章将继续以上篇文章自定义圆形百分比为例进行讲解.有关原理知识请参考Android自定义控 ...
    
		
    3. 
						
  3. EChart使用
		
    EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...
    
		
    4. 
						
  4. Android自定义属性简单使用说明
		
    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_attrs.html 本文从实用角度说明Android自定义属性的基本使用流程,清晰 ...
    
		
    5. 
						
  5. 网站中使用echart
		
    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...
    
		
    6. 
						
  6. 防御CSRF的方法有哪些（一） HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击
		
    CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下 ...
    
		
    7. 
						
  7. EXT.NET 使用总结（2） ---TreePanel(带右键菜单，节点自定义属性)
		
    TreePanel(带右键菜单,节点自定义属性) 其实这个树控件也挺好用的.http://www.ztree.me/v3/main.php#_zTreeInfo html <ext:Panel  ...
    
		
    8. 
						
  8. Android自定义属性
		
    上一篇讲解了Android自定义View,这篇来讲解一下Android自定义属性的使用,让你get新技能.希望我的分享能帮助到大家. 做Android布局是件很享受的事,这得益于他良好的xml方式.使 ...
    
		
    9. 
						
  9. WebGIS中利用AGS JS+eChart实现一些数据展示的探索
		
    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. IDEA 实用注册码自动生成
			
    将以下代码保存成keygen.java java开发者一看就明白什么意思! import java.math.BigInteger; import java.util.Date; import jav ...
    
			
    2. 
						
  2. dubbo 提供者 ip不对
			
    1.服务器多网卡绑定,导致服务起来后程序自己选择的ip不对. 2.提供服务的机器开启了vpn. 3.dubbo配置文件中写死了host. 以下为转载:转自http://www.ithao123.cn/ ...
    
			
    3. 
						
  3. python之private variables
			
    ［python之private variables］ “Private” instance variables that cannot be accessed except from inside a ...
    
			
    4. 
						
  4. Docker配置mysql互为主从
			
    配置准备 两台机器 两台机器:A(193.168.10.101)  B(193.168.10.102) 做好ssh免密登录 mysql大版本需要一致,小版本可忽略 并且两台机器已经安装好了docker ...
    
			
    5. 
						
  5. jQuery学习之jQuery Ajax用法详解(转)
			
    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
    
			
    6. 
						
  6. Mybatis自动生成xml文件、dao接口、实体类
			
    Mybatis可以通过逆向工程,实现自动生成xml文件.dao接口.实体类 以下使用的是Intellij Idea进行自动生成 一.首先,要在pom.xml中导入插件,在<build>中加 ...
    
			
    7. 
						
  7. git  本地忽略某些个文件
			
    git update-index --assume-unchanged <要忽略的文件> git update-index --no-assume-unchanged <要取消忽略的 ...
    
			
    8. 
						
  8. 微信H5支付常见问题汇总
			
    常见问题 一.回调页面 正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面. 如,您希望用户支付完成后跳转至 ...
    
			
    9. 
						
  9. 删除链表中的元素 · Remove Linked List Elements
			
    ［抄题］: Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> ...
    
			
    10. 
						
  10. DNS开源服务器BIND最小配置详解
			
    一,简介 相对于存储和大数据领域,CDN是一个相对小的领域,但行行出状元,BIND就是CDN领域的蝉联N届的状元郎.BIND是一款非常常用的DNS开源服务器,全球有90%的DNS用BIND实现.值得一 ...
    
			
    11.