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. mpg123解码相关
			
    int attribute_align_arg mpg123_decode(mpg123_handle *mh, const unsigned char *inmemory, size_t inmem ...
    
			
    2. 
						
  2. application获取资源
			
    通过application获取资源,它的根路径是WebContent,它可以获取web-inf下的资源 通过getclassload()获取资源,它的根路径是classes,不能获取web-inf下的 ...
    
			
    3. 
						
  3. Spring IOC容器启动流程源码解析(四)——初始化单实例bean阶段
			
    目录 1. 引言 2. 初始化bean的入口 3 尝试从当前容器及其父容器的缓存中获取bean 3.1 获取真正的beanName 3.2 尝试从当前容器的缓存中获取bean 3.3 从父容器中查找b ...
    
			
    4. 
						
  4. Redhat 启动mysql失败及重置密码
			
    cd usr/local/mysql/mysql5.6/bin [root@iZ2ze6yx6b47rdx0vccs5iZ bin]# service mysql-libs-5.1.73-8.el6_ ...
    
			
    5. 
						
  5. xen虚拟机管理命令
			
    #xen虚拟机管理命令 xm list:所有已知的虚拟机列表 xm create:启动一个非托管的虚拟机 xm top:提供所有虚拟机的状态概貌 xm console:打开控制台管理虚拟机 xm ne ...
    
			
    6. 
						
  6. Golang学习系列：（一）介绍和安装
			
    Golang学习系列:(一)介绍和安装 Java程序员带你来到Go的世界,让我们开始探索吧! Go是一种新的语言,一种并发的,带有垃圾回收的.快速编译的语言,它具有一下特点: 他可以在一台计算机上用几 ...
    
			
    7. 
						
  7. pl/sql登录时,数据库下拉框没有任何内容
			
    打开plsql时突然发现database下拉框里面没有任何配置信息,如下图: 解决方法: 找到环境变量TNS_ADMIN,修改存放tnsnames.ora的路径:
    
			
    8. 
						
  8. Java语句
			
    Java的条件语句,循环语句 /* switch语句格式: switch(表达式) { case 值1: 语句体1; break; case 值2: 语句体2; break; ... default: ...
    
			
    9. 
						
  9. Laravel 文件上传失败的问题 error 7
			
    一个站点上传文件失败 error为7  UPLOAD_ERR_CANT_WRITE 临时文件上传不上  $_FILE打出来 Array(    [file] => Array        (  ...
    
			
    10. 
						
  10. PHP性能之语言性能优化：安装VLD扩展——检测性能
			
    使用Linux命令安装 //下载安装包 wget http://pecl.php.net/get/vld-0.14.0.tgz //解压包 tar zxvf vld-0.14.0.tgz //进入编译 ...
    
			
    11.