目录
一、须知
二、Title
三、 Legend
四、Grid
一、须知
配置项官方文档：点此进入。
我总结了比较常用的功能，写进注释里面，附带链接分享和效果图展示。（更新中....）
二、Title
option = {
title: {
text: 'Weekly Sales',//标题文本
textStyle: {
color: '#333', // 标题文本颜色
fontWeight: 'bold', // 标题文本字体粗细，可选'normal','bold','bolder','lighter'
fontSize: 18, // 标题文本字体大小
},
subtext: 'Unit: Pieces', // 副标题文本内容
subtextStyle: {
color: '#aaa', // 副标题文本颜色
fontStyle: 'normal', // 副标题文本字体风格
fontWeight: 'normal', // 副标题文本字体粗细
fontSize: 14 // 副标题文本字体大小
},
textAlign: 'auto', // 标题文本水平对齐方式，可选值：'auto'、'left'、'right'、'center'
padding: [10, 10, 10, 10], // 标题的内边距，上右下左
itemGap: 10, // 主副标题之间的间距
left: 'center', // 标题组件离容器左侧的距离，可选'left', 'center', 'right'，20，'20%'
top:'top' // 标题组件离容器顶部的距离，可选'top', 'middle', 'bottom'，20，'20%'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
【分享链接：点此进入】
【实现效果】
三、 Legend
option = {
title: {
text: 'Referer of a Website',
left: 'center'
},
tooltip: {
trigger: 'item', // 提示框触发类型为数据项触发
formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式器:显示series的name、data的name、data的value和百分比
},
legend: {
orient: 'vertical', // 图例布局方式为垂直，可选'horizontal','vertical'
left: 'left', // 图例组件离容器左侧的距离，可选'left', 'center', 'right'
itemHeight: 14, // 图例的高
itemWidth: 14, // 图例的宽
itemGap: 20, // 图例之间的间隔
padding: [40, 20, 10, 5], // 上、右、下、左的内边距（移动位置）
textStyle: {
color: '#333', // 图例文字颜色
fontSize: 12 // 图例文字大小
},
data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] // 图例数据，与series中的name对应
},
series: [
{
name: 'Access From',
type: 'pie', // 图表类型为饼图
radius: '50%', // 饼图半径，可设置为相对的百分比或绝对的像素值
center: ['50%', '60%'], // 饼图的中心（圆心）坐标，支持绝对像素和相对百分比
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
label: {
show: true, // 是否显示标签
formatter: '{b} : {c} ({d}%)', // 显示data的name、data的value和百分比
fontSize: 12 // 标签文字大小
},
labelLine: {
show: true // 是否显示标签的视觉引导线
},
emphasis: {//鼠标悬浮阴影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale', // 数据更新动画的类型
animationEasing: 'elasticOut', // 数据更新动画的缓动效果
animationDelay: function (idx) { // 数据更新动画的延迟
return idx * 50;
}
}
]
};
【分享链接】
【实现效果】
四、Grid
option = {
grid: {
show: true,
left: '10%', // 网格左边距
top: 60, // 网格顶边距
borderWidth: 1 // 网格边框宽度
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
tooltip: {
show: true, // 显示提示框
trigger: 'axis', // 触发类型，鼠标悬停显示提示框
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 指示器类型为直线
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
【实现链接】
