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
                }
            }
        }]
    };
    

      

  • 相关阅读:
    Java中测试对象的等价性
    Python文件方法
    Python在windows下的安装与配置
    ubuntu日志清理
    hiho48 : 欧拉路·一
    ADO.NET异步操作测试
    c# 生成二维码
    PowerCmd 2.2 注册码
    IE跨Iframe时Session丢失问题
    MongoDB3.0 创建用户
  • 原文地址:https://www.cnblogs.com/hepc/p/9507308.html
Copyright © 2011-2022 走看看