标签：浅谈 value echarts 坐标轴 grid 刻度 true 类目
一起来学习下echarts中的配置，有不好的地方欢迎指出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/echarts.min.js"></script>
<title>echarts</title>
<style>
#myEcahrts{
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div id="myEcahrts"></div>
</body>
<script>
window.onload = () => {
var option = {
// 标题
title:{
show:true, // 是否显示 默认情况下是true
text:'主标题', // 主标题文本
link:'http://www.baidu.com', // 主标题超链接
target:'blank', // 指定窗口打开主标题超链接,'self' 当前窗口打开 'blank' 新窗口打开
textStyle:{
color:'#333', // 主标题文字的颜色。
fontStyle:'normal', // 主标题文字字体的风格。可选：'normal' 'italic' 'oblique'
fontWeight:'bolder', // 主标题文字字体的粗细。可选：'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily:'serif', // 主标题文字的字体系列。
fontSize:26, // 主标题文字的字体大小。
lineHeight:56, // 行高。
width:50, // 文本显示宽度。
height:56, // 文本显示高度。
textBorderColor:'#efefef', // 文字本身的描边颜色。
textBorderWidth:5, // 文字本身的描边宽度。
textShadowColor:'red', // 文字本身的阴影颜色。
textShadowBlur:10 , // 文字本身的阴影长度。
textShadowOffsetX:5, // 文字本身的阴影 X 偏移。
textShadowOffsetY:5, // 文字本身的阴影 Y 偏移。
overflow:'none', // 文字超出宽度是否截断或者换行。配置width时有效 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为... 'break'换行' breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
ellipsis:'...', // 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。
lineOverflow:'none', // 文本超出高度部分是否截断，配置height时有效。 'truncate' 在文本行数超出高度部分截断。
},
subtext:'小店营业额', // 副标题文本
/*
* 副标题的属性与主标题一致
*/
},
// 提示框组件。
tooltip:{
show:true, // 是否显示提示框组件
trigger:'axis', // 触发类型。'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用;'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用;'none':什么都不触发。
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
// formatter:(value)=>{
// console.log(value);
// return ''
// }
},
// 图例组件：展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
data: ['35周', '36周']
},
grid: {
top:'20%',
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
// 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis:{
// 所有类目名称列表
// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日'],
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
// 'value' 数值轴，适用于连续数据;
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据;
type:'category',
position:'bottom', // x 轴的位置:'top','bottom'; 默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
offset:0, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
realtimeSort:true, // 用于制作动态排序柱状图。设为 true 时，表示 X 轴开启实时排序效果，仅当 X 轴的 type 是 'value' 时有效。
sortSeriesIndex:0, // 动态排序柱状图用于排序的系列 id。目前只支持一个系列的柱状图排序效果，所以这个值只能取 0。仅当 X 轴 realtimeSort 为 true 并且 type 是 'value' 时有效。
name:'X坐标轴', // 坐标轴名称。
nameLocation:'end', // 坐标轴名称显示位置。'start' 'middle' 或者 'center' 'end'
// 坐标轴名称的文字样式。
nameTextStyle:{},
nameGap:25, // 坐标轴名称与轴线之间的距离。
nameRotate:0, // 坐标轴名字旋转，角度值。
inverse:true, // 是否是反向坐标轴。
// 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
// 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。
boundaryGap:['20%', '20%'], // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
// min:(value)=>{ // 坐标轴刻度最小值。
// console.log('坐标轴刻度最小值:',value);
// return 20
// },
// max:(value)=>{ // 坐标轴刻度最大值。
// console.log('坐标轴刻度最大值:',value);
// return 50
// },
// 坐标轴轴线相关设置。
axisLine:{},
// 坐标轴刻度相关设置。
axisTick:{},
// 坐标轴次刻度线相关设置。注意：次刻度线无法在类目轴（type: 'category'）中使用。
minorTick:{},
// 坐标轴刻度标签的相关设置。
axisLabel:{},
// 坐标轴在 grid 区域中的分隔线。
splitLine:{},
// 坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
minorSplitLine:{},
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
splitArea:{},
},
// 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
yAxis:{
type:'value'
},
series: [
{
name:'35周',
data: [5000, 2000, 6000, 500, 4000, 5000, 900],
type: 'bar'
},
{
name:'36周',
data: [2000, 2000, 1500, 5000, 9000, 2000, 8000],
type: 'bar'
}
]
}
// 获取dom容器
var myEchart = echarts.init(document.getElementById('myEcahrts'));
myEchart.setOption(option);
}
</script>
</html>
标签：浅谈,value,echarts,坐标轴,grid,刻度,true,类目 来源： https://blog.csdn.net/weixin_45846177/article/details/115327798
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。