Vue Echarts markline绘制

最新推荐文章于 2023-12-21 14:30:40 发布

HWLSHMILY

最新推荐文章于 2023-12-21 14:30:40 发布

阅读量230

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/HWLSHMILY/article/details/128849734

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
  <v-app>
    <v-main>
      <div id="main" style="width: 600px;height:400px;" class="mychart"></div>
    </v-main>
  </v-app>
</template>

<script>
  export default {
    name: "EchartsMarkline",
    mounted() {
      this.drawChart();
    },
    methods: {
      drawChart() {
        let data = [
          [15, 0],
          [-50, 10],
          [-56.5, 20],
          [-46.5, 30],
          [-22.1, 40]
        ];
        let symbolSize = 20;
        //图表的配置
        let option = {
          xAxis: {
            type: 'value',
            axisLine: {onZero: false}
          },
          yAxis: {
            type: 'value',
            axisLine: {onZero: false}
          },
          series: [
            {
              data: data,
              type: 'line',
              symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了
              // 标识线
              markLine: {
                symbol: "none",//去掉警戒线最后面的箭头
                label: {position: "start"},//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                data: [
                  {
                    name: 'x轴为15的竖直线',
                    xAxis: 15,
                    silent: true,             //鼠标悬停事件  true没有，false有
                    lineStyle: {               //警戒线的样式  ，虚实  颜色
                      type: "solid",
                      color: "#FA3934",
                    },
                  },
                  {
                    name: 'y轴为25的水平线',
                    yAxis: 25,
                    silent: true,             //鼠标悬停事件  true没有，false有
                    lineStyle: {               //警戒线的样式  ，虚实  颜色
                      type: "solid",
                      color: "#FA3934",
                    },
                  },
                ]
              }
            }
          ],
        };

        //获取到DOM节点
        let dom = document.getElementById('main');
        console.log(dom)
        //初始化DOM
        let myChart = this.$echarts.init(dom);
        //使用指定的配置项数据显示图表
        myChart.setOption(option, true);
        },
    }
  }
</script>