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: {
lineStyle: {
color: '#c7e821'  //折线的样式颜⾊
},
itemStyle: {
color: ({ data }) => {
if (data <= 80) { return '#ff0000 ' }    //不同点的颜⾊          return '#c7e821'
}
},
markLine: {  //划线
symbol: 'none',  //取消最后的箭头
data: [
rotate属性
[{
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
}
}
}]
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。