echarts数据集dataSet设置上下左右轴的四条轴的图表option设置

₍•ʚ•₎呀呀

已于 2024-02-01 16:31:36 修改

阅读量131

点赞数 3

文章标签： java 前端 javascript

于 2024-02-01 16:29:38 首次发布

本文链接：https://blog.csdn.net/weixin_60886885/article/details/135977269

版权

option = {title: {
      text: "图表名称",
      left: 0,
      top: 0,
      textStyle: {
        fontSize: 30
      },
      subtextStyle: {
        fontSize: 20
      }
    },
    legend: {
      type: 'scroll',
      width: '70%',
      left: 'center',
    },
    tooltip: {},
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        // restore: {},
        saveAsImage: {
          name: Date.now().toString(),
          pixelRatio: 4,
        },
      },
      top: 0,
      right: 0,
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 100,
      },
      {
        type: 'inside',
        yAxisIndex: [0],
        start: 0,
        end: 100,
      }
    ],
    dataset: {
      source: [
  ["序号", "数据1", "数据2"],
  [1, 1.2342216623024895e-10, null],
  [2, 4.567428126121703e-11, null],
  [3, 9.917584643088074e-11, null],
  [4, 1.1215644736160688e-10, null],
  [5, 1.0071312426302853e-10, null],
  [6, 8.124053201722104e-11, null],
  [7, 6.43136775760098e-11, null],
  [8, 6.387966441118146e-11, null],
  [9, 5.678706573563716e-11, null],
  [10, 5.636081465151424e-11, null],
  [11, 5.4411077661802494e-11, null],
  [12, 1.0884609541091692e-10, null],
  [13, 9.760687036822566e-11, null],
  [14, 9.152869919389142e-11, null],
  [15, 8.342800154839088e-11, null],
  [16, 7.538640003928216e-11, null],
  [17, 7.358003017623136e-11, null],
  [18, 7.44765065907191e-11, null],
  [19, 6.897697977098268e-11, null],
  [20, 9.94772527992786e-11, null],
  [21, null, 1.1520111132429877e-10],
  [22, null, 1.0975943389836446e-10],
  [23, null, 1.0068313350172255e-10],
  [24, null, 7.936691102641388e-11],
  [25, null, 7.178943522224288e-11],
  [26, null, 5.67906929794126e-11],
  [27, null, 4.66414693420271e-11],
  [28, null, 1.0584919700465617e-10],
  [29, null, 9.953854344297855e-11],
  [30, null, 7.969389623417066e-11]
]
,
    },
  xAxis: [
    {
      type: 'category',
      gridIndex: 0,
      inverse: false,
      interval: null,
      name: 'X轴name',
      nameLocation: 'middle',
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: { color: '#7871EE', width: 1.5 },
        symbol: ['none', 'none'],
        symbolSize: [10, 10],
        symbolOffset: [0, 0]
      },
      axisTick: {
        show: true,
        inside: true,
        length: 10,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' }
      },
      minorTick: {
        show: true,
        length: 5,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' },
        splitNumber: 3
      },

      axisLabel: { show: true, color: '#7e828f' },
      splitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'solid', width: 1 }
      },
      minorSplitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'dashed', width: 1 }
      },
      min: null,
      max: null
    },
    {
      type: 'category',
      gridIndex: 0,
      inverse: false,
      interval: null,
      position: 'top',
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: { color: '#7871EE', width: 1.5 },
        symbol: ['none', 'none'],
        symbolSize: [10, 10],
        symbolOffset: [0, 0]
      },
      axisTick: {
        show: true,
        inside: true,
        length: 10,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' }
      },
      minorTick: {
        show: true,
        length: 5,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' },
        splitNumber: 3
      },

      axisLabel: { show: true, color: '#7e828f' },
      splitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'solid', width: 1 }
      },
      minorSplitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'dashed', width: 1 }
      },
      min: null,
      max: null
    }
  ],
  yAxis: [
    {
      gridIndex: 0,
      inverse: false,
      interval: null,
      name: 'y轴名称',
      // nameTextStyle: { fontSize: 0 },
      axisLabel: { show: true, color: '#7e828f' },
      axisTick: {
        show: true,
        inside: true,
        length: 10,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' }
      },
      minorTick: {
        show: true,
        length: 5,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' },
        splitNumber: 3
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: { color: '#7871EE', width: 1.5 },
        symbol: ['none', 'none'],
        symbolSize: [10, 10],
        symbolOffset: [0, 0]
      },
      splitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'solid', width: 1 }
      },
      minorSplitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'dashed', width: 1 }
      },
      min: null,
      max: null
    },
    {
      gridIndex: 0,
      position: 'right',
      inverse: false,
      interval: null,
      axisLabel: { show: true, color: '#7e828f' },
      axisTick: {
        show: true,
        inside: true,
        length: 10,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' }
      },
      minorTick: {
        show: true,
        length: 5,
        lineStyle: { type: 'solid', width: 1.5, color: '#7871EE' },
        splitNumber: 3
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: { color: '#7871EE', width: 1.5 },
        symbol: ['none', 'none'],
        symbolSize: [10, 10],
        symbolOffset: [0, 0]
      },
      splitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'solid', width: 1 }
      },
      minorSplitLine: {
        show: true,
        lineStyle: { color: '#b9bec9', type: 'dashed', width: 1 }
      },
      min: null,
      max: null
    }
  ],
    grid: {},
      series: [
    {
      type: 'line',
      datasetIndex: 0,
      xAxisIndex: 0,
      yAxisIndex: 0,
      encode: {
        x: 0,
        y: 1
      }
    },
    {
      type: 'line',
      datasetIndex: 0,
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 0,
        y: 2
      }
    }
  ]
  
}