echarts设置标题样式_EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等...
functiongetChartsLine() {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) {returnvalue;
}
}
},
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();
echarts设置标题样式_EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等...相关推荐
- 修改echarts的x轴y轴的刻度和刻度线文本颜色和xy轴的轴线颜色和标题title的字体颜色
1,x轴y轴都是一样的: 1.1修改刻度文本颜色: 找到xAxis和yAxis: 添加如下代码:(和data和type同级并列) axisLabel: {show: true,textStyle: { ...
- echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果 下图详细的标注了图表中x轴y轴可见的内容 说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
- matplotlib 笔记:设置x轴 y轴文字
原本的图: import numpy as np import matplotlib.pyplot as plt lst=range(10000) a=np.random.choice(lst,150 ...
- 三菱FX5U,机床X轴Y轴工作台定位控制程序 全部使用两轴直线插补 有自动定位,手动定位!手动控制有,点动一次按钮每次走设置的距离
三菱FX5U,机床X轴Y轴工作台定位控制程序!使用三菱J4-A系列伺服驱动器绝对位置系统,程序大小27000多步 1.本程序最多可做20个定位工序,全部使用两轴直线插补! 2.有自动定位,手动定位!手 ...
- EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等
示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echa ...
- echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合,X轴的颜色,X轴字体颜色,调整柱子颜色,调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
- Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
文章目录 echarts中设置x轴和y轴均随滚轮进行缩放 当数据实时渲染时,也可进行区域缩放 echarts中设置x轴和y轴均随滚轮进行缩放 dataZoom 组件 用于区域缩放,从而能自由关注细节的 ...
- echarts柱形图x轴y轴互换_Echarts Y轴底纹改为虚线与设置柱状图为圆角
1.Echarts Y轴底纹改为虚线: yAxis: { splitLine :{ //网格线 lineStyle:{ type:'dashed' //设置网格线类型 dotted:虚线 solid: ...
最新文章
- Pytorch中的5个非常有用的张量操作
- 第1章 信息检索基础
- Fluid 0.5 版本发布:开启数据集缓存在线弹性扩缩容之路
- What is the expectation maximization algorithm?
- EOJ Monthly 2019.11 E. 数学题(反演 + 杜教筛 + 拉格朗日插值)
- Android 系统(54)---Android系统开篇
- DateTimeFormat注解
- JavaScript文档DOM对象处理HTML→document属性方法、write、getElementBy**、getsetAttribute、节点操作方法、innerHTML、操作CSS样式属性
- h5 img js 点击图片放大_jquery – HTML5 Canvas调整图像点击放大
- cookielib和urllib2模块相结合模拟网站登录
- 央行降息 北上广深和厦门南京房价反弹可能性最大
- Want to be happy? Be grateful - David Steindl-Rast
- Ubuntu18.04 鼠标键盘失灵
- 玩吧斗兽棋的一些攻略 同级子谁胜负问题
- 通讯录2.0(动态内存增长版本)
- mysql emoji表情 保存utf8mb4 错误原因总结
- nds运行java_NDS看漫画软件 Comic Book DS 1.0 正式版!
- Java Part1 Day11继承 方法重写 super多态
- 基带传输中的信道编码和信源编码
- 吉林大学计算机科学杨凤杰,吉林大学计算机科学与技术学院 [2005-04] 总第36期...
热门文章
- python语言程序设计袁方答案_北邮“爱课堂”教学平台
- Linux epoll 实现封装
- 云计算机教室 国家标准,计算机云网络教室建设方案
- 解决IDEA报Unmapped Spring configuration files found.Please configure Spring facet
- 天空的颜色 363
- 语音芯片ic分类以及sop8的otp语音芯片对比 选型
- 中国居民人均财富36.6万元,你达标了吗?
- 嵌入式软件工程师待遇怎么样
- 如何查看某公司主体下挂了哪些公众号?
- java 日语文档翻译_日语文档怎么翻译?我来教会你日语翻译