关于echarts如何在折现图上展示异常点位

echarts展示异常点位主要用到的markPoint

  // 为了重复绘图添加定位点位let markPointData=[]if(model.data[0].errorCount&&model.data[0].errorCount.length){let data=model.data[0].errorCount||[]data.forEach((item,index)=>{if(item.abnormalBatteryCount){markPointData.push({xAxis:index})}})}if(markPointData.length){markPointData=markPointData.map((item,index)=>{_this.$set(item,'yAxis',model.data[0].data[item.xAxis].value)return item})}let markPoint={symbol:'circle',symbolSize:10,itemStyle:{color:'#FF5A3B',},data:markPointData// data: [//     {name: '周最低', xAxis: 1, yAxis: -2},//     {name: '周最低', xAxis: 3, yAxis: 5}// ]}_this.$set(model.data[0],'markPoint',markPoint) //在第一条折现图上添加异常点位console.log(model.data,markPoint,'结果')let drawChart = {tooltip: {trigger: "axis",axisPointer: {type: "shadow"},formatter: function(params) {console.log(params,'params')let tooltipStr = "";let strArr = [];let dataIndex=params[0].dataIndexif (params.length) {params.forEach(item => {let itName=''if(item.seriesName.indexOf("series") != -1){itName=item.name}else{itName=item.seriesName}//多条 且 有比率if (item.seriesIndex == lastLenIndex && hasProportion) {let proportion = item.value * 100 + "%";strArr.push(`${item.marker} ${itName} : ${proportion}`);} else {// 数据为浮点类型保留两位小数，整型保留整数if(["报备中门店的单宝收益","报备中门店的总收益"].includes(itName)){strArr.push(`${item.marker} ${itName} : ￥${_this.formatMoney(item.value,Number.isInteger(item.value)?0:2)}`);}else{strArr.push(`${item.marker} ${itName} : ${_this.formatMoney(item.value,Number.isInteger(item.value)?0:2)}`);}}});//如果是// if(valueFlag){//   let sumNum=0 ;//   params.forEach(item => {//     sumNum+=item.value//   })//   strArr.unshift(`总计 : ${_this.formatMoney(sumNum,2)}`)// }else{//  strArr.unshift(params[0].axisValueLabel)dataDate// }strArr.unshift(_this.data[dataIndex].dataDate)//头部标题let abnormalBatteryCount=_this.data[dataIndex].abnormalBatteryCountlet batteryMoreThanOne=_this.data[dataIndex].batteryMoreThanOnelet batteryMoreThanThree=_this.data[dataIndex].batteryMoreThanThreeif(_this.showAbnormalBatteryCount&&abnormalBatteryCount){let str='<span style="padding-left:20px;"></span>'+'位置异常设备总数'+abnormalBatteryCount+'：'if(batteryMoreThanOne){str=str+'<span >'+batteryMoreThanOne+'台</span>>1km'+'<span style="padding-left:10px;"></span>'}// if(batteryMoreThanThree){str=str+'<span >'+batteryMoreThanThree+'台</span>>3km'+''// }strArr.push(str);}tooltipStr = strArr.join(" <br/> ");}console.log(tooltipStr,'tooltipStr')return tooltipStr;}},title: {show: false},legend: {left: "center",itemWidth: 20,itemHeight: 5,// top: 20,bottom:10,data: _this.nameList},grid: {left: "3%",right: "7%",top: 70,bottom: 40,containLabel: true},series: model.data //重要节点};

关于echarts如何在折现图上展示异常点位相关推荐

matlab中的折现图
列表造折现图 x=1:1:5;%x轴上的数据,第一个值代表数据开始,第二个值代表间隔,第三个值代表终止a=[203.024,113.857,256.259,244.888,293.376]; %a数据 ...
python简单的绘制折现图
在做一些数据统计时,折现图能够看出变化的趋势,最近查内存泄漏,跑了一个晚上的数据,想查查,那么折现图能够给一个很直观的结果. 我们使用pylab包来绘制图形. 我使用pip来管理python包 sud ...
vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
先奉上官网地址,一切以官网为主 Echrts官网 Echarts的基本使用安装 cnpm i echarts -S 全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上 impor ...
echarts折现图柱状图饼图资料大全整理
line(折线图) line: { name: ...,//折现名称 coordinateSystem: 'cartesian2d', // 坐标系 xAxisIndex: 0, yAx ...
vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...
echarts折现图的配置
Echarts折线图的配置 (1)去掉折线图的边框线及其加入阴影效果 lineStyle: {normal: {type: 'solid',/*color:"#28a5fc",*/ ...
echarts 折现图和柱状图样式修改设置折线样式背景（文末附带完整代码）
1.设置折线图样式(修改后)(背景竖条纹间隔,去掉边框,设置折线和节点颜色,设置数据字体颜色) 设置折线样式: 设置折线图的背景样式: 2.设置柱状图样式(修改后) 设置柱子的样式设置柱状图背景完 ...
qchart折现图_Qt Charts 动态实时折线图绘制
在Qt Charts发布之前, Qt比较著名两个画图插件是 qwt和Qcustom, 其中Qcustom较轻量,只需要在project 中包含qcustomplot.h 和 qcustomplot.c ...
【Matplotlib】【Python】如何使用matplotlib绘制折现图
目录 1.绘制折线图 2.修改标签文字和线条粗细 3.修改坐标默认值 1.绘制折线图下面使用matplotlib绘制一个简单的折线图,在对其进行定制,以实现更丰富的数据可视化. #!/usr/bin ...

关于echarts如何在折现图上展示异常点位

echarts展示异常点位主要用到的markPoint

关于echarts如何在折现图上展示异常点位相关推荐

最新文章

热门文章