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. windows解压缩版MySQL5.6.40的安装
			
    windows解压缩版MySQL5.6.40的安装 安装步骤: 1.下载mysql-5.6.40-winx64.zip https://cdn.mysql.com//Downloads/MySQL-5 ...
    
			
    2. 
						
  2. SO_LINGER
			
    [SO_LINGER] 在默认情况下,当调用close关闭socket的使用,close会立即返回,但是,如果send buffer中还有数据,系统会试着先把send buffer中的数据发送出去,然 ...
    
			
    3. 
						
  3. Kubernetes的UI界面Kubernetes Dashboard的搭建
			
    1.搭建准备 Kubernetes集群的安装部署 2.搭建过程 2.1.在master节点上创建kubernetes-dashboard.yaml cd /etc/kubernetes vim kub ...
    
			
    4. 
						
  4. Spring IoC入门
			
    ------------------siwuxie095                                 Spring IoC 环境搭建         1.先下载相关库文件,下载链接 ...
    
			
    5. 
						
  5. 在Action中操作域对象
			
    ----------------------siwuxie095 在 Action 中操作域对象 1.在 Action 中可以操作的域对象主要有三个: (1)Request (2)Session (3 ...
    
			
    6. 
						
  6. Win10 Notebook
			
    E:\Perl\site\bin;E:\Perl\bin;C:\Program Files\Microsoft MPI\Bin\;C:\ProgramData\Oracle\Java\javapath ...
    
			
    7. 
						
  7. 在线编辑器CKeditor，CKfinder
			
    在线编辑器的分类: 常见的在线编辑器有很多,比较常用的有FCKeditor(在线编辑器——Ajax 浏览器 端服务器文件管理器),CKeditor(在线编辑器与服务器端文件管理器的分离,) 其中CKe ...
    
			
    8. 
						
  8. How to use mouse to moving windows of not have title bar?
			
    How to use mouse to moving windows of not have title bar? #include "widget.h" #include < ...
    
			
    9. 
						
  9. 文件打包代码更新 使用json记录打包文件信息
			
    经过之前的几次试验 决定使用json记录打包文件信息 #include "Package.h" #include "json/json.h" #include  ...
    
			
    10. 
						
  10. Markdown 手册
			
    前言(可以不看) 最开始只是想写一篇博文,准备使用markdown,感觉很流行(github.简书……很多都支持),而且渲染出来很好看,一直很想学,没有合适的机会,结果拖到了现在.比起什么python ...
    
			
    11.