Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置
// 人均效能
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轴 线的类型、颜色、及标签字体颜色 设置的更多相关文章
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- echarts修改X,Y轴上的颜色
分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...
- Echarts在手机端y轴数据过大,显示不全
解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...
- Echarts 折线图y轴标签值过长 显示
参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...
- vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题
1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...
- highcharts 不显示X轴 Y轴 刻度
xAxis: { tickWidth:0, //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0, //设置坐标宽度 la ...
- 3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)
今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...
- d3.js多个x轴y轴canvas柱状图
最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...
- echarts中,y轴文本倾斜
yAxis : [ { type : 'category', data : ['国家公务员','专业技术人员','职员','企业管理人员'], axisLabel:{ interval: 0 , ro ...
随机推荐
- Kafka学习之(二)Centos下安装Kafka
环境:Centos6.4,官方下载地址:http://kafka.apache.org/downloads ,前提是还需要安装了Java环境,本博客http://www.cnblogs.com/wt ...
- Docker run命令参数整理
Usage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...] -d, --detach=false 指定容器运行于前台还是后台,默认为false -i, - ...
- 面试常问Spring IOC,不得不会。
广义的 IOC IoC(Inversion of Control) 控制反转,即“不用打电话过来,我们会打给你”. 两种实现: 依赖查找(DL)和依赖注入(DI). IOC 和 DI .DL 的关系( ...
- MYSQL 修改表结构基本操作一览
查看表的字段信息:desc 表名; 查看表的所有信息:show create table 表名; 添加主键约束:alter table 表名 add constraint 主键 (形如:PK_表名) ...
- docker启动容器报错: could not synchronise with container process: not a directory
错误现象 在运行容器时,出现以下错误 [root@localhost test]# docker run -it -d -v $PWD/test.txt:/mydir mytest fd44cdc55 ...
- 从GitHub远程仓库中删除文件夹或文件
在上传项目到github时,忘记忽略了某个文件夹target,就直接push上去了, 最后意识到了此问题,决定删除掉远程仓库中的target文件夹 删除前: 删除后: 在github上只能删除仓库,却 ...
- postman+linux+pistache的http通信过程
一.pistache配置 1.安装cmake[https://www.cnblogs.com/judes/p/10327638.html] 2.下载pistache[git:https://githu ...
- Character Encoding in .NET
https://docs.microsoft.com/en-us/dotnet/standard/base-types/character-encoding#Encodings Characters ...
- DDD 之 Multiple Canonical Models
MultipleCanonicalModels Scratch any large enterprise and you'll usually find some kind of group focu ...
- kafka在windows上的安装、运行
https://blog.csdn.net/u010283894/article/details/77106159 kafka 创建消费者报错 consumer zookeeper is not a ...