zoukankan      html  css  js  c++  java
  • 给echarts的图表加水平直线或其它直线

     可通过markLine及type=‘line’的方式添加直线

    1、markline

    可通过设置symbol取消/增加两端的箭头

    markLine: {
                    symbol: ['none', 'none'],//去掉箭头
                    itemStyle: {
                        normal: { lineStyle: { type: 'solid', color:'blue'}
                        ,label: { show: false, position:'left' } }
                    },
                    data: [{
                            name: 'Y 轴值为 100 的水平线',
                            yAxis: 7.24
                    },
                    [
                        {name: '标线1起点', value: 10, x: 50, y: 20},
                        {name: '标线1终点', x: 150, y: 120}
                    ]
                    ]
            } 

    2、type=‘line’

    此种方式,对于X坐标轴为字符串的值无法从圆点开始

    {
            name: 'MA5',
            type: 'line',
            data: [
                ['8/14', 8.5],
                ['8/20', 8.5]
            ],
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                     2
                }
            }
        }

    3、示例

    option = {
        xAxis: {
            data : ['8/14','8/15','8/16','8/17','8/18','8/19','8/20']
        },
        yAxis: {},
        series: [{
            symbolSize: 20,
            data: [
                ['8/14', 8.04],
                ['8/14', 9.04],
                ['8/15', 6.95],
                ['8/15', 7.58],
                ['8/15', 8.81],
                ['8/15', 8.33],
                ['8/16', 9.96],
                ['8/17', 7.24],
                ['8/18', 4.26],
                ['8/18', 10.84],
                ['8/20', 4.82],
                ['8/20', 5.68]
            ],
            type: 'scatter',
            // labelLine:{normal:{show:false}},
            markLine: {
                    symbol: ['none', 'none'],//去掉箭头
                    itemStyle: {
                        normal: { lineStyle: { type: 'solid', color:'blue'}
                        ,label: { show: false, position:'left' } }
                    },
                    data: [{
                            name: 'Y 轴值为 100 的水平线',
                            yAxis: 7.24,
                            // valueDim: 'close'
                    },
                    [
                        {name: '标线1起点', value: 10, x: 50, y: 20},
                        {name: '标线1终点', x: 150, y: 120}
                    ]
                    ]
            }
        }
        ,
        {
            name: 'MA5',
            type: 'line',
            data: [
                ['8/14', 8.5],
                ['8/20', 8.5]
            ],
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                     2
                }
            }
        }]
    };
    

      

  • 相关阅读:
    H3BPM子表的复制
    vue规格新增一对多的例子
    vue自制switch滑块
    table垂直居中
    css清楚浮动的class
    网页之间的参数传递
    调用get_str_time(时间), 就能把毫秒的时间转换成格式化的 ,转化时间戳的方法
    css实现照片上传的加号框
    递归函数获得n个不重复的随机数
    随机生成n个不重复的数,范围是2-32,并让其在新页面打开
  • 原文地址:https://www.cnblogs.com/hepc/p/9507308.html
Copyright © 2011-2022 走看看