echarts添加基准线

option = {
    title : {
        text: '某楼盘销售情况',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['意向','预购','成交']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710],
          markLine:{
            itemStyle:{
            normal:{lineStyle:{type:'solid',color:'#000'},label:{show:true,position:'left'}}
            },
            large:true,
            effect:{
              show: false,
    loop: true,
    period: 0,
    scaleSize : 2,
    color : null,
    shadowColor : null,
    shadowBlur : null
          },
              data:[       
                 [
                 {name: '标线1起点', value: 400, xAxis: -1, yAxis: 400},      // 当xAxis为类目轴时,数值1会被理解为类目轴的index,通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
                {name: '标线1终点', xAxis: '周日', yAxis: 400},             // 当xAxis为类目轴时,字符串'周三'会被理解为与类目轴的文本进行匹配
    ],
            ]
          }
          
          
          
        },
        {
            name:'预购',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'意向',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]

};


版本不同会不一样

3版本中使用方式

data: [
    {
        name: '平均线',
        // 支持 'average', 'min', 'max'
        type: 'average'
    },
    {
        name: 'Y 轴值为 100 的水平线',
        yAxis: 100
    },
    [
        {
            // 起点和终点的项会共用一个 name
            name: '最小值到最大值',
            type: 'min'
        },
        {
            type: 'max'
        }
    ],
    [
        {
            name: '两个坐标之间的标线',
            coord: [10, 20]
        },
        {
            coord: [20, 30]
        }
    ], [{
        // 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
        yAxis: 'max',
        x: '90%'
    }, {
        type: 'max'
    }],
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts中,可以通过使用markLine来添加基准线基准线可以是水平直线或者标准线,可以用不同的颜色来区分标准线以上或者以下的数据。 首先,需要设置series的类型为line,并在series中添加markLine来定义基准线的样式和数据。例如: ``` series: [ { type: 'line', markLine: { symbol: 'none', data: [ { yAxis: 30, // 自定义下限值 label: { show: false, // 不显示基准线名称 }, lineStyle: { type: 'dashed', // 基准线样式为虚线 color: '#b17063', // 基准线颜色 }, }, { yAxis: 50, // 上限值 label: { show: false, }, lineStyle: { type: 'dashed', color: '#b17063', }, }, ], }, }, ] ``` 以上代码片段展示了如何添加两条基准线,一条下限值为30,另一条上限值为50。可以根据项目需求自行调整基准线的样式和位置。 通过上述方法,你可以在Echarts添加多个基准线并设置其样式来满足需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts 图表加水平直线或者标准线.js](https://download.csdn.net/download/qq_36437172/12388051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts问题整理之多条基准线设置](https://blog.csdn.net/qq_43574304/article/details/114917403)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echarts线图设置基准线](https://blog.csdn.net/hfhwfw161226/article/details/131220785)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值