echarts里面常用的属性
option = {
tooltip:{ //提示框浮层
// position:[10,10], //默认是在同一个地方的
formatter:'{c}', //{a} 系列名 series[0].name {b} 横坐标 {c} 纵坐标
// backgroundColor:'blue', //背景颜色
},
legend:{
data:['良率'] //图形顶部的标签 点击可显示隐藏整条线 必须与series[index]内的name同名
},
xAxis: {
type: 'category', //xAxis轴类型
data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00', '02:00', '04:00', '06:00'],
splitLine: { show: false }, //坐标轴中间的分割线 隐藏
axisLabel: {
color: '#79a5a5'
}, //坐标轴刻度标签
axisLine: { show: false }, //坐标轴轴线 隐藏
axisTick: { show: false } //坐标轴刻度 隐藏
},
yAxis: {
type: 'value',
name: '良率 (%)', //y轴 名字
nameTextStyle: {
color: '#79a5a5' //y轴 名字颜色
},
splitLine: { show: false },
axisLabel: {
color: '#79a5a5'
},
axisLine: { show: false },
axisTick: { show: false },
min: 0,
max: 100,
// splitNumber:5 //分割段数
},
series: [{
name:'良率',
data: [90, 95, 90, 91, 96, 81, 91, 92, 78, 96, 91, 91],//数据
type: 'line',
symbol: 'pin', //数值点的形状
symbolSize:8, //数值点的大小
symbolRotate:180, //数值点的旋转角度
showSymbol:true, //数值点的显示隐藏
hoverAnimation:true, //数值点hover是否有动画
// stack:'',//可堆叠前面的数值到最后一项
label: {
normal: {
show: true //数值点的数据
}
},
lineStyle: {
color: '#c7e821' //折线的样式 颜色
},
itemStyle: {
color: ({ data }) => {
if (data <= 80) { return '#ff0000 ' } //不同点的颜色
return '#c7e821'
}
},
markLine: { //划线
symbol: 'none', //取消最后的箭头
data: [
[{
value: 80, //线的数值
lineStyle: { //线样式 颜色
color: '#36dcdc'
},
label: { //线标签
color: '#000', //颜色
position: 'middle', //位置
formatter: '{c} %', //格式
backgroundColor: '#36dcdc', //背景色
padding: 5,
borderRadius: 5
},
coord: ['08:00', 80] //起点 [横坐标,数值]
}, {
coord: ['06:00', 80]//终点 [横坐标,数值]
}]
]
},
areaStyle: { //区域填充样式
color: { //颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#505E0D' // 0% 处的颜色
}, {
offset: 1, color: '#171A14' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};