多y轴折线图

var colors = ['#FC6310', '#21AD7F', '#3662EC'];
option = {
  title: {
    text: 'Gradient Stacked Area Chart'
  },
  color: colors,
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: {
        show: false,
        readOnly: false
      },
      restore: {
        show: false
      },
      saveAsImage: {
        show: false
      }
    }
  },
  legend: {
    // orient: 'vertical',
    x: 'right', //可设定图例在左、右、居中
    y: 'top', //可设定图例在上、下、居中
    padding: [10, 0, 0, 0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
    position: 'right',
    data: ['设备新增数量', '产品新增数量', '厂商新增数量']
  },
  xAxis: [
    {
      type: 'category',
      // axisTick: {
      //   alignWithLabel: false
      // },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ECEDF0', //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
          width: 1, //y轴线的宽度
          type: 'dashed' //y轴线为实线
        }
      },
      data: [
        '2016-01',
        '2016-02',
        '2016-03',
        '2016-04',
        '2016-05',
        '2016-06',
        '2016-07',
        '2016-08',
        '2016-09',
        '2016-10',
        '2016-11',
        '2016-12'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '设备新增数量',
      // 居中
      nameLocation: 'middle',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 50,
      min: 0,
      max: 11000,
      position: 'left',
      axisLine: {
        lineStyle: {
          color: colors[2]
        },
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      },
      // splitLine: {
      //   lineStyle: {
      //     type: 'solid',
      //     color: '#bbb'
      //   }
      // },
      splitLine: {
        // show: true,
        lineStyle: {
          color: '#ECEDF0', //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
          width: 1, //y轴线的宽度
          type: 'dashed' //y轴线为实线
        }
      },
      axisTick: {
        show: true
      }
    },
    {
      type: 'value',
      name: '产品新增数量',
      // 居中
      nameLocation: 'middle',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 50,
      min: 0,
      max: 200,
      position: 'right',
      axisLine: {
        lineStyle: {
          color: colors[0]
        },
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      name: '厂商新增数量',
      // 居中
      nameLocation: 'middle',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 40,
      min: 0,
      max: 200,
      position: 'right',
      offset: 80,
      axisLine: {
        lineStyle: {
          color: colors[1]
        },
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '设备新增数量',
      type: 'line',
      data: [
        10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000
      ]
    },
    {
      name: '产品新增数量',
      type: 'line',
      yAxisIndex: 1,
      data: [10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30, 150]
    },
    {
      name: '厂商新增数量',
      type: 'line',
      data: [1200, 1850, 206, 36, 255, 1800, 1600, 4547, 9958, 69, 93, 150]
    }
  ]
};

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高效压缩算法的研究 随着数字视频的广泛应用,对视频压缩算法的要求要绘制多y轴折线图,可以使用echarts的grid和yAxis配置项来实现。以下是一个简也越来越高。未来的数字视频压缩技术将会研究更加高效的压缩算法,单的示例代码: ```javascript option = { grid: [ {left: '5%', right: '50%', bottom以实现更高的压缩比和更好的视频质量。 2. 融合多媒体技术的发展: '10%'}, {left: '55%', right: '5%', bottom: '10%'} ], xAxis: { 数字视频压缩技术将会与音频压缩技术和图像压缩技术进行融合,从而 type: 'category', data: ['周一', '周二', '周三', '周四', '周五',实现多媒体数据的高效压缩和传输。 3. 硬件实现和优化 数字视频压缩 '周六', '周日'] }, yAxis: [ { type: 'value', name: '销量', 技术将会在硬件实现和优化方面取得更多的进展,从而实现更加高 position: 'left', axisLabel: { formatter: '{value} 件' } }, { type效的压缩和解压缩。 七、优势和局限性 数字视频压缩技术的优势主要: 'value', name: '价格', position: 'right', axisLabel: { formatter: '{value} 元' 包括以下几个方面: 1. 实现视频文件的小巧化,从而节省存储空间和传 } } ], series: [ { name: '销量', type: 'line', data: [输带宽。 2. 可以在保证视频质量的前提下,实现更高的压缩比。 3120, 200, 150, 80, 70, 110, 130], yAxisIndex: 0 }, { name: '价格', type: 'line', data: [2.5, 3.2, 2.8, 4.5, 3.6, 4.1, 3.9], yAxisIndex: 1 } ] }; ``` 在上面的示例中,我们定义了一个包含两个grid的图表,分别占据了整个图表宽度的不同部分。然后定义了两个yAxis,分别对应销量和价格两个指标。在series中,我们通过yAxisIndex来指定每个series对应的y轴。这样就可以实现多y轴折线图的绘制了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值