转自:http://blog.csdn.net/kirinlau/article/details/72876689

首先要将一个图表显示在前端页面上:

var myChart = echarts.init(document.getElementById('testDIV'));     //初始化echarts页面显示的空间
  • 1
//------------------------- begin-----------------------------
var myOption = {
// backgroundColor: "#eee", // echarts图表的背景颜色,默认为透明
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['交警', '武警','协警'],
textStyle: {
color: '#fff' //legend字体颜色
}
},
grid: {
left: '3%',
right: '7%',
top:'15%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'value',
// x轴的字体样式
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize:'16'
}
},
// 控制网格线是否显示
splitLine: {
show: false,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['red']
}
},
// x轴的颜色和宽度
axisLine:{
lineStyle:{
color:'#fff',
width:3, //这里是坐标轴的宽度,可以去掉
}
}
},
yAxis: {
type: 'category',
data: ['福田','南山','罗湖','盐田','龙华','宝安','龙岗'],
// y轴的字体样式
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
// y轴的颜色和宽度
axisLine:{
lineStyle:{
color:'#fff',
width:1, //这里是坐标轴的宽度
}
}
},
series: [
{
name: '交警',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '武警',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '协警',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
]
}; //--------------------------- end-----------------------------
 myChart.setOption(myOption);  // 将图标显示在页面上
  • 1


详解该段代码

xAxis:  {
type: 'value', //这行代码表示该轴的类型为value
// x轴的字体样式
axisLabel: {
show: true, //这行代码控制着坐标轴x轴的文字是否显示
textStyle: {
color: '#fff', //x轴上的字体颜色
fontSize:'16' // x轴字体大小
}
},
// 控制网格线是否显示
splitLine: {
show: false, // 网格线是否显示
// 改变样式
lineStyle: {
color: '#ccc' // 修改网格线颜色
}
},
// x轴的颜色和宽度
axisLine:{
lineStyle:{
color:'#fff', // x坐标轴的轴线颜色
width:3, //这里是坐标轴的宽度,可以去掉
}
}
},

也可以在以上代码的轴线中加入:

     //  隐藏坐标轴
axisLine: {
show: false
},
// 去除坐标轴上的刻度线
axisTick: {
show: false
}

注:
坐标轴中的 type 可以为value或者category, 即确定该轴为值轴或者类目轴,
example: 在一个坐标系中的条形图中:
x轴为男生,女生等类别选项,那么该轴就为类目轴,
y轴为类别的数量或者其他值类(诸如年龄,身高等等),就为值轴。


Y轴修改设置同X轴

ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示的更多相关文章

  1. idea 修改编辑区字体样式、大小

      idea 修改编辑区字体样式.大小 CreateTime--2018年4月26日10:36:59 Author:Marydon 设置-->Editor-->Font-->修改Fo ...

  2. 怎么修改placeholder字体的css样式

    修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...

  3. echarts修改X,Y轴上的颜色

     分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...

  4. delphi 修改Hint的字体和颜色

    //修改Hint的字体和颜色   public    { Public declarations }    procedure Sshowhint(var hintstr:string;var can ...

  5. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  6. 修改美化Matlab字体

    修改美化Matlab字体    MATLAB作为高校理工科类本科生或研究生必不可少的科研工具已经有着很多年的历史,以至于在我们的大学生活里或科研工作中,MATLAB处处闪现着它的身影,给我们带来了不少 ...

  7. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  8. Android Studio 3.1.2 修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址

    Android Studio 3.1.2  修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...

  9. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

随机推荐

  1. 利用Visio绘制数据流图与组织结构图

    绘制数据流图: 利用Visio 2007来绘制网上书店系统的数据流图.利用Visio 2007创建Gane- Sarson数据流图,可以选择“软件和数据库”模板,然后再选择“数据流模型图”,创建之后可 ...

  2. iOS Ad hoc

    There's one situation in which you need an Ad Hoc profile, and that's when you want to test Push Not ...

  3. 入门常用SQL及官方文档的使用

    SQL语句基础理论 SQL是操作和检索关系型数据库的标准语言,标准SQL语句可用于操作关系型数据库. 5大主要类型: ①DQL(Data Query Language,数据查询语言)语句,主要由于se ...

  4. 【RF库Collections测试】Remove From List

    Name:Remove From ListSource:Collections <test library>Arguments:[ list_ | index ]Removes and r ...

  5. 使用 requests 访问 HTTPS

    当我们访问 HTTPS 的网站时,需要进行证书验证,在浏览器中可以自动处理验证问题,在 Python 中有以下两种做法: import requests //不进行证书验证,但这种方式会出现警告,如下 ...

  6. 使用IEDA新建jsp项目以后使用javax.servlet.*报错

    新建一个jsp项目,然后再里面配置完了一切写了一个servlet的文件: 点击运行的时候出现了javax程序包不存在的错误,百度了许多都在说是tomcat的事情,吧tomcat/lib下面的servl ...

  7. python基础---->python的使用(七)

    这里记录python关于io.装饰器和序列化的一些知识.面对大河我无限惭愧,我年华虚度,空有一身疲倦,和所有以梦为马的诗人一样,岁月易逝 一滴不剩. python的一些知识 一.python中的装饰器 ...

  8. 【分享】Linux(Ubuntu)下如何自己编译JDK

    最近在看<深入理解 Java 虚拟机>这本书.里面提到了如何手动编译JDK,于是就试了试. 在编译的过程中,遇到了一些问题.上网一搜,发现了一篇很好的文章,跟大家分享一下:ubuntu 1 ...

  9. 注意@ Override不同版本的区别

    @Override注解用于方法的覆写上,它在编译期有效,也就是Java编译器在编译时会根据该注解检查是否真的是覆写,如果不是就报错,拒绝编译. 该注解很大程度解决我们的误写问题,比如子类和父类的方法名 ...

  10. Elasticsearch学习之Java操作1

    1. Elasticsearch为Java用户提供了两种内置客户端 1.1 节点客户端(node client): 节点客户端以无数据节点(none data node)身份加入集群,换言之,它自己不 ...