echarts渲染数据时,报错

There is a chart instance already initialized on the dom!警告

是因为Dom元素重复渲染,此时只需要在挂载Dom之前判断一下,如果有Dom存在则清除,没有则挂载

if (this.$refs.thirdMain == null) {
    return
}
echarts.dispose(this.$refs.thirdMain)
var myChart = echarts.init(this.$refs.thirdMain);
val.option && myChart.setOption(val.option);

折线图警戒线

警戒线

series: [{
    markLine:{
    data:[
      {
        yAxis:100,
        label:{
          padding: [0, 0, 0, -75],
          position: "end",
          formatter:(e)=>{
            return "最大阈值:"+e.value
          }
        }
      },
      {
        yAxis: 60,//警戒值
        label:{
          padding: [0, 0, 0, -75],//警戒线标签名距离警戒线的位置
          position: "end",//警戒线标签的定位,还有minddle等字段。
          formatter:(e)=>{//自定义警戒线标签名
            return "最小阈值:"+e.value
          }
        }
      },
    ],
    silent: false,//鼠标移入警戒线,警戒线会变粗,false不变,true变
    symbol:false,
    lineStyle: {//警戒线的样式,颜色,宽度,类型
      color: 'red',
      type: 'dashed',//还有实线,
      width: 1
    },
  }
}]

超出警戒线标红显示 visuaMap和 series 同级

visualMap:{
   pieces:[
     {
       lte:60,
       color:"red"
     },
     {
       gt:60,
       lte:100,
       color:"#5470c6"
     },
     {
       gt:100,
       color:"red"
     },
   ],
   left:"center",//标签距离左边的距离,还可以用left。center等字段
   top: "25",//标签距离顶部距离。还可以用top。middle等字段
   orient: "horizontal",//标签排列方式,水平和垂直
   show:false,//标签是否显示
 },