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. 跟我学算法- tensorflow 卷积神经网络训练验证码
			
    使用captcha.image.Image 生成随机验证码,随机生成的验证码为0到9的数字,验证码有4位数字组成,这是一个自己生成验证码,自己不断训练的模型 使用三层卷积层,三层池化层,二层全连接层来 ...
    
			
    2. 
						
  2. 创建标签的两种方法insertAdjacentHTML  和  createElement 创建标签  setAttribute 赋予标签类型 appendChild 插入标签
			
    1. 建立字符串和insertAdjacentHTML('beforeEnd', ) 2. 通过createElement 创建标签  setAttribute 赋予标签类型 appendChild  ...
    
			
    3. 
						
  3. Spring Boot实践——基础和常用配置
			
    借鉴:https://blog.csdn.net/j903829182/article/details/74906948 一.Spring Boot 启动注解说明 @SpringBootApplica ...
    
			
    4. 
						
  4. j2ee常用jar包
			
    [b]activation.jar:[/b]与javaMail有关的jar包,使用javaMail时应与mail.jar一起加入到lib中去,具体负责mail的数据源和类型等 [b]ajaxtags- ...
    
			
    5. 
						
  5. 将bmp文件转换为jpg文件
			
    procedure TForm1.Button1Click(Sender: TObject);(*压缩MBP为JPEG;但是没有提供压缩比可选项凑合用吧,大概1/3 ^_^:Note:必须加上JPEG ...
    
			
    6. 
						
  6. java反射之ClassLoader
			
    类加载器ClassLoader ClassLoader能在运行时, 知道任意一个类的的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性. 一.类加载器的工作机制 1:加载Jvm把clas ...
    
			
    7. 
						
  7. 搭建简单的Spring框架
			
    1.Spring框架相关jar包下载地址http://repo.springsource.org/libs-release-local/org/springframework/spring,复制,进入 ...
    
			
    8. 
						
  8. UNITY5 为什么Inspector视图中脚本前面的勾选框没了
			
    结果发现了一个奇葩的问题..凡事脚本没有勾选项的,都是因为你的脚本没有Start方法..如果你想让勾选框显示出来,把如下方法加入即可,不信你可以试试.嘿嘿.
    
			
    9. 
						
  9. for 续2
			
    --------siwuxie095             (二)skip=n 忽略(屏蔽.隐藏)文本前 N 行的内容. (N 必须大于 0,不能等于 0)     格式: FOR /F " ...
    
			
    10. 
						
  10. 611. Valid Triangle Number三角形计数
			
    ［抄题］: 给定一个整数数组,在该数组中,寻找三个数,分别代表三角形三条边的长度,问,可以寻找到多少组这样的三个数来组成三角形? [暴力解法]: 全部都用for循环 时间分析: 空间分析: ［思维问题 ...
    
			
    11.