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 ...
随机推荐
- eclipse自定义快捷键(模板)
window->Preferences->Java->Editor->Templates https://blog.csdn.net/changqing5818/article ...
- python 排序算法
冒泡排序: 一. 冒泡排序的定义 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进 ...
- Python爬虫(二)——对开封市58同城出租房数据进行分析
出租房面积(area) 出租房价格(price) 对比信息 代码 import matplotlib as mpl import matplotlib.pyplot as plt import pan ...
- opencv学习之路(19)、直方图
一.概述 二.一维灰度直方图 #include "opencv2/opencv.hpp" #include<iostream> using namespace cv; ...
- 创成汇丨投脑风暴·创心不止|路演日 第2期,寻IT创业者
创成汇丨投脑风暴·创心不止|路演日 第2期 无畏荆棘之路的风雨 誓做浪潮之巅的勇者 你说,创业是一场孤注一掷的较量 你说,创新从来都是与过去battle 你还说,坚持总是比开始更让你难以琢磨 所以 ...
- vc++2010如何新建项目并在控制台打印helloworld
关于写c++使用什么集成开发环境的问题其实挺纠结的.我找了好久找到codeblocks,发现这款IDE还是最适合用在最标准的c++语法环境中.其实先前装过vs2015旗舰版,但是这款软件太大了,非常消 ...
- luoguP1281 书的复制 DP,贪心
luoguP1281 书的复制 链接 https://www.luogu.org/problemnew/show/P1281 思路 简单dp,输出方案. 很明显dp记录路径对不对? 恭喜你死了. 求出 ...
- 【CentOS 7】CentOS7与CentOS6 的区别
前言 centos7与6之间最大的差别就是初始化技术的不同,7采用的初始化技术是Systemd,并行的运行方式,除了这一点之外,服务启动.开机启动文件.网络命令方面等等,都说6有所不同. 一.系统初始 ...
- BZOJ4779: [Usaco2017 Open]Bovine Genomics
题目描述 Farmer John owns Ncows with spots and N cows without spots. Having just completed a course in b ...
- JavaScript(类型转换、条件语句、循环、函数)
类型装换 转为数字类型 // Number console.log(Number(undefined)); //NaN console.log(Number(null)); //0 console.l ...