echarts图表标线-markLine(阈值线、警戒线)+箭头

最新推荐文章于 2024-08-05 11:08:01 发布

张云，

最新推荐文章于 2024-08-05 11:08:01 发布

阅读量3.6k

点赞数 1

本文链接：https://blog.csdn.net/buzhidjiaosha/article/details/128480269

版权

javascript 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

VUE

9 篇文章 0 订阅

订阅专栏

echarts

8 篇文章 0 订阅

订阅专栏

series里面添加markLine

    const echart = () =>{
     var xData=["xxx","xxx","xxx","xxx","xxx","xxx","xxx","xxx,"xxx","xxx","xxx"],
          serieData=[10, 30, 20, 30, 80, 20, 10,30,30,20,30,20],
          marks=[20];
      let myEcharts = echarts.init(document.getElementById("hdechart7"))
      myEcharts.setOption({
        grid: {
          top:"15%",
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data :xData,
            axisTick: {
              show:false,
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: '12',
              },
              interval: 0,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#456980 ',
              }
            },

          }
        ],
        yAxis: {
          name: "xxx",
          nameTextStyle: {
            color: "#fff",
            fontSize:".12rem"
          },
          type: 'value',
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#456980',
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#456980',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: '12',
            },
          }
        },
        series : [
          {
            name:'',
            type:'bar',
            barWidth: '18',
            data:serieData,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}',
                textStyle: {
                  color: '#fff',
                  fontWeight: 'normal',
                  fontSize: '12',
                },
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(49, 200,190, 0.8)'
                }, {
                  offset: 1,
                  color: 'rgba(16, 127,159, 0.8)'
                }]),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            //标记的线1
            markLine: {
              symbol:['circle', 'arrow'], //箭头
              silent: true,
              lineStyle: {
                type: 'dashed'
              },
              data: [
                {
                  yAxis:marks,
                  lineStyle: {
                    width: 1.656,
                    color: '#00ff00'
                  },
                  label: {
                    show: true,
                    color: '#00ff00',
                    fontSize: '14',
                  }
                }

              ]
            },
          },

        ],

      });
      window.addEventListener("resize", function () {
        myEcharts.resize();
      });
    }