以下是用到的几个主要的配置项和简单的介绍
一:tooltip,当鼠标移到图表时触发显示,类似hover效果
tooltip: {
trigger: 'axis', // 显示触发类型
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
二:grid ,当前图表的相对位置,设置成距离顶部距离,或左边距离等
grid:{
top:0,
left:0,
containLabel: true
},
三:xAxis 图表中x轴坐标
xAxis: {
type: 'value',
position: 'top', //这里可以配置X轴的位置,可以在最上面或最下面
data: ['0','20%','40%','60%','80%','100%'], //显示在x轴上的数据
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
textStyle: {
color: "#aaaaaa"
}
},
axisLine: { //坐标轴轴线相关设置。
lineStyle: {
color: "#aaaaaa"
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线相关设置
// show: false
lineStyle: {
// width: 4,
color: "#efefef",
type: "solid" //'dotted'虚线 'solid'实线
}
}
},
四:yAxis 图表中Y轴坐标,配置和xAxis差不多
五:series 图表中我认为最主要的配置项
series: [{
name: '地区覆盖度(100%)',
type: 'bar', //图表类型
label: {
show: true,
position: 'right',
color: "#000"
},
data: [] //图表中主要数据展示
},
{
name: '人口覆盖度(100%)',
type: 'bar',
label: {
show: true,
position: 'right',
color: "#000"
},
data: []
},
]
以上只是工作中个人理解,并不包含完全意思
echarts地址:https://echarts.apache.org/zh/option.html#title