// 人均效能
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. 给datagrid的日期格式化成年月日

    $('#infos').datagrid({ title:'系统版本列表', iconCls:'icon-view', method:'POST', singleSelect:false, fit : ...

  2. 1.1:Get Started with Unity Shaders

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 第1章开始正式进入Unity Shader的学习. 什么是Shader 本 ...

  3. Luogu P1010 幂次方

    [橙题不会做系列]QAQ 是李老师上课的题目-- 这题最开始想法是打表做.事实证明这样做也可以( 老师用的是位运算-- 这种一步步分解也能想到用递归qwq #include <algorithm ...

  4. 解决eclipse修改后台代码ctrl+s总是【自动重启服务器】问题

    每次修改后台代码保存总是自启动服务很是耗时,以下设置可以解决你的烦恼: 双击你要设置的项目: 点击ok,最后ctrl+s一下就搞定了. 这时候你随便修改后台代码随便ctrl+s都不会重新启动服务器.b ...

  5. 剑指offer(57)二叉树的下一个节点

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 题目分析 这题一定要画图,因为只有画图我们才能分清楚下 ...

  6. IVIEW对的table组件超出长度用省略号代替,使用气泡提示。

    render: (h, params) => { return h('div', [ h('Tooltip', { props: { placement: 'top' } }, [ h('spa ...

  7. UVA1400 "Ray, Pass me the dishes!"

    思路 线段树维护最大子段和,只不过这题还要维护左右端点 还是维护pre,suf,sum,ans,只不过每个再多出一个维护端点的变量即可 注意多解讨论的大于号和大于等于号 代码 #include < ...

  8. UVA1160 X-Plosives

    思路 每个元素设为点,化合物设为边 不能出现k条边k个点的环 直接并查集检查即可 代码 #include <cstdio> #include <algorithm> #incl ...

  9. Linux下设置svn开机自启动

    方式一:centos 7 设置svn开机自启动 使用新的systemctl 服务命令  (笔者成功验证过,该方式可行) [root@iZjvr37lpviqbkZ init.d]# vi /lib/s ...

  10. webapi研究说明

    首先定义公共的返回对象 /// <summary> /// 返回数据对象 /// </summary> public class ResponseItem<T> { ...