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. Guidelines for Installing Oracle HR Sample Schemas
			
    All scripts necessary to install sample schemas reside in $ORACLE_HOME/demo/schema directory. Before ...
    
			
    2. 
						
  2. Spring的属性文件properties使用注意
			
    Spring的属性文件properties使用注意 Spring 中属性文件的配置 通常我们会使用properties文件来设置一些属性,如数据库连接信息,避免进行硬编码, <bean clas ...
    
			
    3. 
						
  3. C语言高级程序设计——进制算法以及位算符号
			
    语言不够官方:意会: 数据储存运算是以二进制的,二进制数有原码 反码 补码三种.通常所说的二进制就是原码.(语言不官方) 原码 :4的原码可以为:0000 0100:最高位0 可以为符号数 反码:正数 ...
    
			
    4. 
						
  4. tomcat 403 forbidden
			
    server.xml和tomcat-users.xml都是设置于过了,还是403,最后发现context.xml中多了一行 <Valve className="org.apache.c ...
    
			
    5. 
						
  5. [转].NET 4.5+项目迁移.NET Core的问题记录   HTTP Error 502.5
			
    本文转自:http://www.cnblogs.com/ronli/p/5900001.html 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过 ...
    
			
    6. 
						
  6. Condition Variable使用及其Thread Cancellation线程取消
			
    条件变量Condition Variable的一般用法: 唤醒用法: struct { pthread_mutex_t mutex; pthread_cond_t cond; //whatever v ...
    
			
    7. 
						
  7. 自动化ui 保存max场景信息 结构化处理比较好用
			
    struct gt_cl_hp_saveMaxinfo ( pathpp ="" , fn savemaxinfor =( DialogMonitorOPS.unRegisterN ...
    
			
    8. 
						
  8. 斜杠反斜杠，去空格\xa0，连接函数join（）
			
    1斜杠反斜杠 斜杠:/.反斜杠:\. 反斜杠\,在windows系统中用来表示目录. 而在unix系统中,/表示目录.由于web遵循unix命名,所以在网址(URL)中,/表示目录. 在unix系统中 ...
    
			
    9. 
						
  9. 进入docker的4种方式
			
    在使用Docker创建了容器之后,大家比较关心的就是如何进入该容器了,其实进入Docker容器有好几多种方式,这里我们就讲一下常用的几种进入Docker容器的方法. 进入Docker容器比较常见的几种 ...
    
			
    10. 
						
  10. 【转载】Reactor模式，或者叫反应器模式
			
    Reactor这个词译成汉语还真没有什么合适的,很多地方叫反应器模式,但更多好像就直接叫reactor模式了,其实我觉着叫应答者模式更好理解一些.通过了解,这个模式更像一个侍卫,一直在等待你的召唤,或 ...
    
			
    11.