// 人均效能
var initRjxnChart = function () {
var rjxnChart = echarts.init(document.getElementById("rjxn_echart"));
var rjxnoption = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '8%',
bottom: '20%',
top: '10%',
right: '8%',
},
legend: {
show: true,
orient: 'horizontal',
data: ['人均每小时操作量'],
x: '8%',
y: '0%',
textStyle: {
color: '#8c8c92'
}
},
color: ["#cd9136"],
xAxis: [{
type: 'category',
data: ['上海', '北京', '江苏', '山东', '湖北', '武汉', '广州'],
boundaryGap: true,
axisTick: { // X轴线 刻度线
show: false,
length: 10,
lineStyle: {
color: 'red',
type: 'solid',
width: 2
}
},
axisLabel: { // X轴线 标签修改
textStyle: {
color: '#8c8c92', //坐标值得具体的颜色
}
},
splitLine:{
show: true, // X轴线 颜色类型的修改
lineStyle: {
type: 'dashed',
color: '#292c38'
}
},
axisLine: {
show: true, // X轴 网格线 颜色类型的修改
lineStyle: {
type: 'dashed',
color: '#292c38'
}
},
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 3000,
interval: 500,
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#8c8c92', //坐标值得具体的颜色
}
},
axisLine: {
show: true, // Y轴线
lineStyle: {
type: 'dashed',
color: '#292c38'
}
},
splitLine:{
show: true,
lineStyle: {
type: 'dashed',
color: '#292c38'
}
}
}],
series: [{
name: '人均每小时操作量',
type: 'line',
data: [100, 200, 100, 500, 100, 100, 1000]
}
]
};
if (rjxnoption && typeof rjxnoption === "object") {
rjxnChart.setOption(rjxnoption, true);
}
};

Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置的更多相关文章

  1. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

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

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

  3. Echarts在手机端y轴数据过大,显示不全

    解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...

  4. Echarts 折线图y轴标签值过长 显示

    参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...

  5. vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题

    1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...

  6. highcharts 不显示X轴 Y轴 刻度

    xAxis: { tickWidth:0,        //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0,        //设置坐标宽度 la ...

  7. 3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)

    今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...

  8. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  9. echarts中,y轴文本倾斜

    yAxis : [ { type : 'category', data : ['国家公务员','专业技术人员','职员','企业管理人员'], axisLabel:{ interval: 0 , ro ...

随机推荐

  1. mysql(5.7以上)查询报错:ORDER BY clause is not in GROUP BY..this is incompatible with sql_mode=only_full_group_by

    执行mysql命令查询时: select * from table_name错误信息如: [Err] 1055 - Expression #1 of ORDER BY clause is not in ...

  2. app 开发

    移动APP开发   ios  Android 中国人写的 MUI 布局框架 HTML5plus 硬件驱动调用(打开摄像头,闪光灯,震动) 和 系统调用(打开相册,通讯录,message) http:/ ...

  3. go中 -strconv包的使用

    strconv 包中的函数和方法 // atob.go ------------------------------------------------------------ // ParseBoo ...

  4. Grunt: 拼接代码,js丑化(压缩),css压缩,html压缩,观察文件,拷贝文件,删除文件,压缩文件

    准备工作 grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装 1.Grunt 安装 npm install -g grunt-cli 这是全局安装 2.在当前文件下npm init ...

  5. 搭建Elasticsearch平台

    https://cloud.tencent.com/developer/article/1189282 https://blog.csdn.net/qq_34021712/article/detail ...

  6. Centos 查看 CPU 核数 和 型号 和 主频

    cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c     10  Intel(R) Xeon(R) CPU E5-2430 v4 @ 2.10 ...

  7. Linux下调试.Net core(1):lldb的安装

    windows下,我们对于.net程序发生Crash,资源泄露,死锁等问题的分析,有神器windbg,那现在我们的.net core程序运行在linux上时,该怎么进行对对Core Dump文件进行分 ...

  8. 全面解读第四代基因测序技术Oxford Nanopore--转载

    纳米孔测序技术(又称第四代测序技术)是最近几年兴起的新一代测序技术.目前测序长度可以达到150kb.这项技术开始于90年代,经历了三个主要的技术革新:一.单分子DNA从纳米孔通过:二.纳米孔上的酶对于 ...

  9. 深入探访支付宝双11十年路,技术凿穿焦虑与想象极限 | CYZONE特写

    小蚂蚁说: 双11十年间,交易规模的指数级增长不断挑战人们的想象力,而对蚂蚁技术团队来说,这不仅是一场消费盛宴,而是无数次濒临压力和焦虑极限的体验,更是技术的练兵场.如今双11对蚂蚁金服而言,已经绝不 ...

  10. 剧透 & 报名 | 蚂蚁金服ATEC城市峰会·上海即将开幕

    小蚂蚁说: 2019年1月4日,蚂蚁金服ATEC城市峰会将以“数字金融新原力(The New Force of Digital Finance)”为主题,在中国上海举办.蚂蚁金服ATEC(Ant Te ...