横向展示折线图

本文介绍了如何使用Echarts库创建横向显示的折线图,并详细展示了如何配置图表选项,包括设置坐标轴、数据、平滑曲线、标记线以及异常点的标识方法。通过调整坐标轴属性,实现坐标轴名称旋转和数据位置的定制,同时通过定义不同颜色来区分最大值和最小值的标记线。
摘要由CSDN通过智能技术生成
  1. coord: [25, 3] - x 表示值, y表示下标

  2. options:
    options: {
    tooltip : {
    trigger: ‘axis’,
    extraCssText:‘transform: rotate(90deg)’,
    axisPointer: {
    type: ‘line’,
    }
    },
    xAxis: {
    type: ‘value’, //数据
    position :‘top’, //x 轴的位置【top bottom】
    nameRotate :-90, //坐标轴名字旋转,角度值。
    axisLabel :{ //坐标轴刻度标签的相关设置。
    rotate : 90 //刻度标签旋转的角度,
    },
    scale: true, //是否是脱离 0 值比例
    min: 0,
    },
    yAxis: {
    type: ‘category’,
    data: [1605052800000,1605657600000, 1607644800000, 1607731200000],
    inverse :‘true’, //是否是反向坐标轴。
    axisLabel :{
    rotate : -90
    },
    connectNulls: true, // 不连续线连接
    },
    series: [{
    data: [
    {value: 10, time: 1605052800000},
    {value: 14, time: 1605657600000},
    {value: 20, time: 1607644800000},
    {value: 30, time: 1607731200000},
    ].

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值