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 ...
随机推荐
- Linux基础命令---lpq查看打印队列
lpq lpq指令用来显示当前打印队列的状态.如果命令行中没有指定打印机或类,则将显示默认目标上排队的作业. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.ope ...
- [转载]Oracle Golden Gate - 概念和机制 (ogg)
出处:https://www.cnblogs.com/qiumingcheng/p/5435907.html Golden Gate(简称OGG)提供异构环境下交易数据的实时捕捉.变换.投递. OGG ...
- CRT/LCD/VGA Information and Timing
彩色阴极射线管的剖面图: 1. 电子QIANG Three Electron guns (for red, green, and blue phosphor dots)2. 电子束 Electron ...
- SpringIOC和AOP原理 设计模式
SpringIOC的特点 在接触Spring的过程中,听到最多的无非两个名词,一个是控制反转一个是依赖注入.实际这是一个意思,控制反转代表原来由程序本身去控制对象之间的依赖关系的这种格局被反转了,通过 ...
- 剑指offer(33)丑数
题目描述 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 题目分析 ...
- tp剩余未验证内容-8
模型类的自动验证? 分为自动验证, 和 动态验证(手工验证), 前者的验证规则是定义在模型类中的, 所以要自己创建 扩展的/继承的模型类, 同时用 D方法实例化模型类 而动态验证是 先调用 valid ...
- BinaryTree
public class TreeNode { public int val; public TreeNode left; public TreeNode right; public TreeNode ...
- bind封装
原理:通过apply或者call方法来实现. (1)初始版本 Function.prototype.bind=function(obj,arg){ var arg=Array.prototype.sl ...
- Mysql中 in or exists not exists not in区别 (网络整理)
in 和or区别: 如果in和or所在列有索引或者主键的话,or和in没啥差别,执行计划和执行时间都几乎一样. 如果in和or所在列没有 索引的话,性能差别就很大了.在没有索引的情况下,随着in或者o ...
- js实现千位分隔
最近一个项目中使用到了千位分隔这个功能,在网上也看见一些例子,但是实现起来总觉有些复杂.因此,自己实现了一个千位分隔,留给后来的我们. 先上源码吧. 该方法支持传入的是一个数字字符串,数字.第二个参数 ...