EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等
示例里工作一般情况是够用了,更复杂的可以查询教程:
title 官方解说:http://echarts.baidu.com/option.html#title
坐标相关: X轴:http://echarts.baidu.com/option.html#xAxis
坐标相关: Y轴:http://echarts.baidu.com/option.html#yAxis
表格部分:http://echarts.baidu.com/option.html#grid
<script>
function getChartsLine() { var myChart = echarts.init(document.getElementById('progress'),'macarons'); var option = {
title: {
text: '工程折线图', //主标题
textStyle:{
color:'#0DB9F2', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
align:'center' //水平对齐
},
subtext:'副标题', //副标题
subtextStyle:{ //对应样式
color:'#F27CDE',
fontSize:14
},
itemGap:7
},
grid:{ //显示数据的图表位于当前canvas的坐标轴
x:50,
y:55,
x2:50,
y2:60,
borderWidth:1
},
tooltip: {
trigger: 'axis'
},
legend: {
data:["计划完成","实际完成"]
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
},
yAxis: {
type: 'value', //默认以千分位显示,不想用的可以在这加一段
axisLabel : { //调整左侧Y轴刻度, 直接按对应数据显示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
},
series: [
{
name:"计划",
type:'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
},
{
name:"实际",
type:'line',
data:[0, 0, 37, 0, 0, 15, 3036, 5572, 0, 0, 0, 0],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
myChart.setOption(option);
} getChartsLine();
</script>
修改后:
EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等的更多相关文章
- 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 ...
- PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息
一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 ...
- Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置
// 人均效能 var initRjxnChart = function () { var rjxnChart = echarts.init(document.getElementById(" ...
- JS逆向实战6-- x轴 y轴 过点触验证码
点触验证码是一种常见的反爬手段 解决方案有两种:一种是直接解决,这需要深度学习机器学习等图像处理技术,以大量的数据训练识别模型,最终达到模型足矣识别图片中的文字提示和应该点击的区域之间的对应关系. 这 ...
- svg 动画 透明度 放大缩小 x轴Y轴
参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...
- 绕X 轴 Y轴 Z轴旋转的结果
void warp_perspect_3_angle(cv::Mat face, float roll, float yaw, float pitch) { cv::Mat face_img = fa ...
随机推荐
- I tensorflow/core/platform/cpu_feature_guard.cc:142] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
遇到了这个问题,意思是你的 CPU 支持AVX AVX2 (可以加速CPU计算),但你安装的 TensorFlow 版本不支持 解决:1. 如果是初学者 或者 没有太大计算速度的需求,在开头加上这两行 ...
- mysql 5.7.25中ibtmp1文件过大
问题描述 生产环境linux suse11.4, 根目录/ 下大小:50G, ibtmp1大小:31G, 磁盘空间爆满100%告警. ibtmp1文件说明 ibtmp1是非压缩的innodb临时表的独 ...
- MySQL Transaction--使用SHOW INNODB STATUS 查看未提交事务
当MySQL服务器出现性能问题时,应该优先排查未提交事务,除可以查询相关系统表外,还可以观察SHOW INNODB STATUS的输出结果来确认未提交事务. 首先查看InnoDB事务的History ...
- IP切换小技巧
说到这个问题很多人都有同感.公司一般使用的都是静态的IP(如图:使用下面的IP地址),而我们在外面是用的一般是动态获取的IP(如图:自动获得IP地址),因此就产生了一个问题,需要来回切换IP,也就是需 ...
- c#: 剪切板监视实现
CR TubeGet中有用户需要剪切板监视功能,记录代码以做备忘: using System; using System.Runtime.InteropServices; using System.W ...
- 数字转datetime格式
原数据:int型 转成年月日 时分秒的形式 source_test['happenTime'] = source_test['happenTime'].map(lambda x:str(x)) sou ...
- 剑指Offer_编程题-003 - 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList
如题 (总结) 首节点也存放了值,所以ListNode t = listNode; 直接从头开始遍历即可. 简单题目,但是构建的时候出了点问题,毕竟需要自己简单测测. 掌握链表的构建方法, 还要根据题 ...
- graylog-日志收集
1.linux主机日志收集 使用syslog协议将系统日志发送到graylog上进行收集,可以指定端口 touch /etc/rsyslog.d/graylog.conf *.* @192.168.9 ...
- mysql 的 3306、33060 端口区别
Port 3306 is the default port for the MySQL Protocol, which is used by the mysql client, MySQL Conne ...
- 2019牛客暑期多校训练营(第八场)E:Explorer(LCT裸题 也可用线段树模拟并查集维护连通性)
题意:给定N,M,然后给出M组信息(u,v,l,r),表示u到v有[l,r]范围的通行证有效.问有多少种通行证可以使得1和N连通. 思路:和bzoj魔法森林有点像,LCT维护最小生成树. 开始和队友 ...