请问echart的dataset数据集为对象数组时encode该怎么配置

Question

option = {
  title: {
    text: '订单数量X/产品价格Y/利润率Z——订单族群分布',
    x: 'center'
  },
  tooltip: {
    formatter: (params) => {
      let str = '';
      str += `${params.value[0]}<br />${params.marker}订单数量:${
        params.value[1]
      }<br />${params.marker}产品价格:${params.value[2]}<br />${
        params.marker
      }利润率:${params.value[3] / 10}%`;
      return str;
    }
  },
  xAxis: {
    name: '订单数量',
    splitLine: { show: false }
  },
  yAxis: {
    name: '产品价格',
    splitLine: { show: false },
    scale: true
  },
  dataset: {
    // 第一种是对象数组形式，请问encode该怎么写才能跟第二种一样显示出数据
    // dimensions: ['order', 'number', 'price', 'profix'],
    // source: [
    //   { order: '订单A', number: 2860, price: 277, profix: -170 },
    //   { order: '订单B', number: 3116, price: 137, profix: 276 },
    //   { order: '订单C', number: 1516, price: 168, profix: 315 },
    //   { order: '订单D', number: 5670, price: 274, profix: -405 },
    //   { order: '订单E', number: 3599, price: 236, profix: -498 },
    //   { order: '订单F', number: 799, price: 198, profix: 498 },
    //   { order: '订单G', number: 299, price: 258, profix: -398 },
    //   { order: '订单H', number: 1899, price: 228, profix: 298 },
    //   { order: '订单I', number: 1699, price: 258, profix: -298 },
    //   { order: '订单J', number: 2099, price: 238, profix: -298 }
    // ]

    // 第二种的encode配置x轴为第二列数据，y轴为第三列数据就能显示
    source:[
      ['订单A', 2860, 277, -170],
      ['订单B', 3116, 137, 276],
      ['订单C', 1516, 168, 315],
      ['订单D', 5670, 274, -405],
      ['订单E', 3599, 236, -498],
      ['订单F', 799, 198, 498],
      ['订单G', 299, 258, -398],
      ['订单H', 1899, 228, 298],
      ['订单I', 1699, 258, -298],
      ['订单J', 2099, 238, -298]
    ]
  },
  grid: {
    left: 40,
    right: 130
  },
  series: [
    {
      name: 'negative',
      type: 'scatter',
      // 散点大小
      symbolSize: (data) => {
        if (data[3] < 0) {
          return data[3] / 4;
        }
        return;
      },
      label: {
        show: true,
        formatter: (params) => {
          if (params.data[3] < 0) {
            return `${params.data[0]}`;
          }
          return '';
        },
        color: '#000',
        fontWeight: 'bold',
        position: 'inside',
        minMargin: 2
      },
      itemStyle: {
        color: (params) => {
          if (params.data[3] < 0) {
            return '#fff';
          }
          return '#5470c6';
        },
        borderColor: '#ff0000'
      },
      emphasis: {
        scale: false
      },
      encode: {
        x: [1],
        y: [2]
      }
    },
    {
      name: 'positive',
      type: 'scatter',
      // 散点大小
      symbolSize: (data) => {
        if (data[3] > 0) {
          return data[3] / 4;
        }
        return;
      },
      label: {
        show: true,
        formatter: (params) => {
          if (params.data[3] > 0) {
            return `${params.data[0]}`;
          }
          return '';
        },
        color: '#000',
        fontWeight: 'bold',
        position: 'inside',
        minMargin: 2
      },
      itemStyle: {
        color: (params) => {
          if (params.data[3] > 0) {
            return '#5470c6';
          }
          return '#fff';
        }
      },
      emphasis: {
        scale: false
      },
      encode: {
        x: [1],
        y: [2]
      }
    }
  ]
};

现在的问题是怎么使用第一种对象数组格式的数据去实现图表
https://codepen.io/hongsir12/...

Answer 1

脑子秀逗了，忘记下面参数变化了

option =  {
  title: {
    text: '订单数量X/产品价格Y/利润率Z——订单族群分布',
    x: 'center'
  },
  tooltip: {
    formatter: (params) => {
      let str = '';
      str += `${params.value.order}<br />${params.marker}订单数量:${
        params.value.number
      }<br />${params.marker}产品价格:${params.value.price}<br />${
        params.marker
      }利润率:${params.value.profix / 10}%`;
      return str;
    }
  },
  xAxis: {
    name: '订单数量',
    splitLine: { show: false }
  },
  yAxis: {
    name: '产品价格',
    splitLine: { show: false },
    scale: true
  },
  dataset: {
    dimensions: ['order', 'number', 'price', 'profix'],
    source: [
      { order: '订单A', number: 2860, price: 277, profix: -170 },
      { order: '订单B', number: 3116, price: 137, profix: 276 },
      { order: '订单C', number: 1516, price: 168, profix: 315 },
      { order: '订单D', number: 5670, price: 274, profix: -405 },
      { order: '订单E', number: 3599, price: 236, profix: -498 },
      { order: '订单F', number: 799, price: 198, profix: 498 },
      { order: '订单G', number: 299, price: 258, profix: -398 },
      { order: '订单H', number: 1899, price: 228, profix: 298 },
      { order: '订单I', number: 1699, price: 258, profix: -298 },
      { order: '订单J', number: 2099, price: 238, profix: -298 }
    ]
  },
  grid: {
    left: 40,
    right: 130
  },
  series: [
    {
      name: 'negative',
      type: 'scatter',
      // 散点大小
      symbolSize: (data) => {
        if (data.profix < 0) {
          return data.profix / 4;
        }
        return;
      },
      label: {
        show: true,
        formatter: (params) => {
          if (params.value.profix < 0) {
            return `${params.value.order}`;
          }
          return '';
        },
        color: '#000',
        fontWeight: 'bold',
        position: 'inside',
        minMargin: 2
      },
      itemStyle: {
        color: (params) => {
          if (params.value.profix < 0) {
            return '#fff';
          }
          return '#5470c6';
        },
        borderColor: '#ff0000'
      },
      emphasis: {
        scale: false
      },
      encode: {
        x: 1,
        y: 2
      }
    },
    {
      name: 'positive',
      type: 'scatter',
      // 散点大小
      symbolSize: (data) => {
        if (data.profix > 0) {
          return data.profix / 4;
        }
        return;
      },
      label: {
        show: true,
        formatter: (params) => {
          if (params.value.profix > 0) {
            return `${params.value.order}`;
          }
          return '';
        },
        color: '#000',
        fontWeight: 'bold',
        position: 'inside',
        minMargin: 2
      },
      itemStyle: {
        color: (params) => {
          if (params.value.profix > 0) {
            return '#5470c6';
          }
          return '#fff';
        }
      },
      emphasis: {
        scale: false
      },
      encode: {
        x: 1,
        y: 2
      }
    }
  ]
};