带标签提示的折线图
效果
option
var data = [], x = [], y = [], legendData = [], series = [];
var color = ["#ffdfac", "#73e56b", "#6dbcff", "#a298ff", "#ff0a6c", "#25c41c", "#f76432", "#ffaf68", "#2772ff", "#ff9898"]; var rgbColor = ["rgba(255,223,172,.4)", "rgba(115,229,107,.4)", "rgba(109,188,255,.4)", "rgba(162,152,255,.4)", "rgba(255,10,108,.4)", "rgba(37,196,28,.4)", "rgba(247,100,50,.4)", "rgba(255,175,104,.4)", "rgba(39,114,255,.4)", "rgba(255,152,152,.4)",] for (var i = 0; i < val.length; i++) { console.log('val783',val); val.map(m => { legendData.push({ name: m.name, }) x = [] let y = [] let z = [] m.monitorData.map(n => { x.push(n.date) y.push(n.count) if(!isEmpty(n.description)){ z.push({ coord:[n.date,n.count], name:n.description }) } }) console.log('z',z); series.push({ //下方折线 type: 'line', data:y, z:100, lineStyle:{ color: '#ffc303', }, markPoint: { symbol:'roundRect',//标注样式 // symbolKeepAspect:'true',//支持缩放 symbolSize:[0,1],//标注大小 symbolOffset:['0','-900%'],//标注偏移位置 z: -100, label:{ show:true, formatter:'{b}' }, data: [...z] }, }) }) } console.log('x',x); option = { grid: { left: '60', right: '60', bottom: '40', top: '60', }, legend: { left: 'center', data: legendData, top: '20', }, tooltip: { trigger: 'axis', textStyle:{ align:'left' }, tooltip: { trigger: "item", }, }, xAxis: { type:'category',//类目 boundaryGap:true,//x坐标两边留白策略 data: x, axisTick:{//坐标刻度 show:true, alignWithLabel:false, }, }, yAxis: { boundaryGap:false, axisLine:{ show:true, lineStyle:{ opacity:0, } }, axisTick:{//坐标刻度 show:false, }, splitLine:{ lineStyle:{ type:'dashed', } }, }, series: series }
数据结构
[ { "code": "", "count": 3, "date": "", "describe": "", "mediaName": "", "monitorData": [ { "code": "", "count": 2, "date": "00:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "01:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "02:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "03:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "04:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "05:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "06:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "07:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "08:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "09:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "10:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 1, "date": "11:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "12:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "13:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "14:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "15:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "16:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "17:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "18:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "19:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "20:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "21:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "22:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "23:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" } ], "name": "保乐力加", "rate": null, "summary": "", "title": "", "url": "" }, { "code": "", "count": 5, "date": "", "describe": "", "mediaName": "", "monitorData": [ { "code": "", "count": 0, "date": "00:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 111, "date": "01:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "02:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 123, "date": "03:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 789, "date": "04:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "05:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 222, "date": "06:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 22, "date": "07:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "", "description": "加个提示111" }, { "code": "", "count": 64, "date": "08:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 1, "date": "09:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 97, "date": "10:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 3, "date": "11:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 88, "date": "12:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "13:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 176, "date": "14:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 350, "date": "15:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "16:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 0, "date": "17:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 86, "date": "18:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "", "description": "加个提示" }, { "code": "", "count": 47, "date": "19:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 710, "date": "20:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 50, "date": "21:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" }, { "code": "", "count": 200, "date": "22:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "", "description": "这里有件事" }, { "code": "", "count": 100, "date": "23:00", "describe": "", "mediaName": "", "name": "", "summary": "", "title": "", "url": "" } ], "name": "帝亚吉欧", "rate": null, "summary": "", "title": "", "url": "" } ]
