option = {
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7']
},
yAxis: {},
series: [
{
symbolSize: 10,
data: [
['1', 8.04],
['1', 6.95],
['1', 7.58],
['1', 8.81],
['1', 8.33],
['2', 7.66],
['2', 6.81],
['2', 6.33],
['2', 8.96],
['2', 6],
['3', 7.20],
['3', 7.20],
['3', 4.23],
['3', 7.83],
['3', 4.47],
['3', 3.33],
['4', 4.96],
['4', 7.24],
['4', 6.26],
['4', 8.84],
['4', 5.82],
['5', 5.68],
['5', 4.05],
['5', 6.03],
['5', 2.0],
['5', 7.83],
['6', 3.33],
['6', 4.96],
['6', 8.33],
['6', 7.66],
['6', 4.47],
['7', 7.58],
['7', 8.81],
['7', 7.66],
['7', 6.26],
['7', 6.03],
],
type: 'scatter',
markArea: {//设置具体区域的背景颜色,选择不同区间 设置图表对应的背景颜色
silent: true,
data: [
[{
yAxis:'1',
itemStyle:{
color:'#81b22f'
}
}, {
yAxis:'2'
}],[{
yAxis:'2',
itemStyle:{
color:'#505765'
}
}, {
yAxis:'3'
}],[{
yAxis:'3',
itemStyle:{
color:'#f4b9a9'
}
}, {
yAxis:'4'
}],[{
yAxis:'4',
itemStyle:{
color:'#a5aeb44f'
}
}, {
yAxis:'5'
}]
]
},
markLine: { // 样式可以单独设置,也可以一起设置
symbol: "none",
silent: true, // 鼠标移上是否有响应(线变粗)
data: [
{
yAxis: "8",
//type: "min/max/average" // 特殊的标注类型,用于标注最大值最小值等。
lineStyle: { // 线的样式
color: "#77D048",
width: 1,
opacity: 0.8
},
label: { // 文字的样式,默认是白色,有时候文字不显示,可能是颜色的问题
color: "#77D048",
formatter:"优秀(350)",
}
},
{
yAxis: "9",
lineStyle: { // 线的样式
color: "#EFCA2A",
width: 1,
opacity: 0.8
},
label: { // 文字的样式,默认是白色,有时候文字不显示,可能是颜色的问题
color: "#EFCA2A",
formatter:"优秀(350)",
}
}
],
},
},
{
name: '产量',
data: [8, 6.5, 5.8, 6.6, 4.9, 6.2, 7.3],
type: 'line',
itemStyle: {
normal: {
lineStyle: {
width: 2,
}
}
}}]
};
Echarts 一个图表内显示两个数据展示形式
最新推荐文章于 2023-11-17 16:29:24 发布