价格段echart示例

Dingtalk_20211015141222.jpg

const { symbolOffset1: symbolOffset } = this
const xAxisData = ['卡罗拉', '凯美瑞', '天籁', '迈腾']
// TP
const lineData1 = [{ value: 260 }, { value: 280 }, { value: 284 }, { value: 298 }]
const lineData2 = [{ value: 200 }, { value: 130 }, { value: 364 }, { value: 268 }]
const lineData3 = [{ value: 150 }, { value: 260 }, { value: 324 }, { value: 218 }]
const datasTP = [lineData1, lineData2, lineData3]
// MSRP
const lineData11 = [{ value: 270 }, { value: 290 }, { value: 294 }, { value: 308 }]
const lineData22 = [{ value: 210 }, { value: 140 }, { value: 374 }, { value: 278 }]
const lineData33 = [{ value: 160 }, { value: 270 }, { value: 334 }, { value: 228 }]
const datasMSRP = [lineData11, lineData22, lineData33]
return getPriceGradientChartOption({
  symbolOffset,
  xAxisData,
  datasTP,
  datasMSRP
})

const lineSeriesOption = {
  symbolSize: 8,
  lineStyle: {
    color: 'transparent'
  },
  itemStyle: {
    color: 'rgba(51,102,255,0.2)',
    borderWidth: 1,
    borderColor: 'rgba(51,102,255,0.5)'
  }
}

function getLineBarSeries(option) {
  const {
    symbolOffset = true,
    datas,
    stack,
    barItemStyle
  } = option
  if (!datas || !datas.length) return []
  const stack1SymbolOffsetX = symbolOffset ? (stack === 1 ? '-200%' : '200%') : 0
  const minSymbolOffset = [stack1SymbolOffsetX, -8]
  const maxSymbolOffset = [stack1SymbolOffsetX, 8]
  const barData1 = []
  let barData2 = []
  for (let i = 0; i < datas[0].length; i++) {
    const itemValues = datas.map(item => item[i])
    let minValue = itemValues[0]
    let maxValue = itemValues[0]
    for (let l = 1; l < itemValues.length; l++) {
      if (itemValues[l].value < minValue.value) {
        minValue = itemValues[l]
      } else {
        itemValues[l].symbolOffset = [stack1SymbolOffsetX, 0]
      }
      if (itemValues[l].value > maxValue.value) {
        maxValue = itemValues[l]
      } else {
        itemValues[l].symbolOffset = [stack1SymbolOffsetX, 0]
      }
    }
    minValue.symbolOffset = minSymbolOffset
    maxValue.symbolOffset = maxSymbolOffset
    barData1.push(minValue)
    barData2.push(maxValue)
  }
  // const barData1 = [150, 230, 224, 218]
  // const barData2 = [260-150, 280-230, 284-224, 298-218]
  barData2 = barData2.map((item, index) => ({ value: item.value - barData1[index].value }))

  // console.log('lineData1', lineData1)
  // console.log('lineData2', lineData2)
  // console.log('lineData3', lineData3)
  // console.log('barData1', barData1)
  // console.log('barData2', barData2)

  const lineSeries = datas.map(data => ({
    ...lineSeriesOption,
    data,
    name: stack === 1 ? 'MSRP' : 'TP',
    type: 'line',
    label: {
      show: true,
      offset: stack === 1 ? [-8, 0] : [8, 0],
      position: stack === 1 ? 'left' : 'right',
      color: '#3366FF',
      formatter: params => {
        const { value, data: { ratio = '13.2%' }} = params
        if (stack === 2) {
          return `{right1|${value}k}  {right2|${ratio}}`
        }
        return `${value}k`
      },
      rich: {
        right1: {
          color: '#FF5656'
        },
        right2: {
          color: '#6E758A'
        }
      }
    }
  }))

  const barSeries = [barData1, barData2].map((data, index) => ({
    data,
    name: stack === 1 ? 'MSRP' : 'TP',
    type: 'bar',
    stack,
    barWidth: index === 0 ? 0 : 16,
    tooltip: {
      show: false,
      trigger: 'item'
    },
    barGap: '100%',
    itemStyle: index === 0 ? {
      color: 'transparent',
      barWidth: 0
    } : barItemStyle
  }))

  const lineBarSeries = [lineSeries, barSeries]
  let series1 = []
  for (let i = 0; i < lineBarSeries.length; i++) {
    series1 = [...series1, ...lineBarSeries[i]]
  }
  return series1
}

function getPriceGradientChartOption(params) {
  const {
    symbolOffset,
    xAxisData,
    xAxisData2,
    datasTP,
    datasMSRP
  } = params

  // TP
  const seriesTP = getLineBarSeries({
    symbolOffset,
    datas: datasTP,
    stack: 1,
    barItemStyle: {
      color: 'rgba(51,102,255,0.2)',
      borderRadius: 14,
      borderWidth: 1,
      borderColor: 'rgba(51,102,255,0.5)'
    }
  })
  // console.log('lineBarSeries', seriesTP)

  // MSTP
  const seriesMSRP = getLineBarSeries({
    symbolOffset,
    datas: datasMSRP,
    stack: 2,
    barItemStyle: {
      color: 'rgba(255,86,86,0.2)',
      borderRadius: 14,
      borderWidth: 1,
      borderColor: 'rgba(255,86,86,0.5)'
    }
  })

  const option = {
    grid: {
      bottom: 90
    },
    legend: {
      show: true,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 90,
      textStyle: {
        color: 'rgba(0,0,0,0.45)'
      },
      data: [
        {
          name: 'MSRP',
          itemStyle: {
            color: '#3366FF'
          }
        },
        {
          name: 'TP',
          itemStyle: {
            color: '#FF5656'
          }
        }
      ],
      bottom: 0
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          // interval: 0,
          margin: 34,
          color: '#000',
          fontWeight: '600',
          fontSize: 14
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitArea: {
          show: true,
          interval: 0,
          areaStyle: {
            shadowOffsetY: 26,
            shadowColor: '#F7F8FA',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#FFFFFF' // 0% 处的颜色
              }, {
                offset: 1, color: '#F7F8FA' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        splitLine: {
          show: true,
          interval: xAxisData2 ? 1 : 0,
          lineStyle: {
            shadowOffsetY: 26,
            shadowColor: '#FFF',
            color: '#fff',
            width: 16
          }
        }
      },
      xAxisData2 ? {
        type: 'category',
        position: 'bottom',
        data: xAxisData2,
        axisLabel: {
          interval: 0,
          margin: 50,
          color: '#000',
          fontWeight: '600',
          fontSize: 14
        },
        axisTick: {
          show: false
        }
      } : null
    ],
    yAxis: [
      {
        name: '单位：元',
        nameGap: 40,
        nameTextStyle: {
          color: '#AFB2BF'
        },
        z: 1,
        type: 'value',
        splitLine: {
          show: true,
          type: 'dashed',
          lineStyle: {
            color: '#f0f0f0'
          }
        }
      }
    ],
    tooltip: {
      show: true,
      trigger: 'item'
    },
    series: [
      ...seriesTP,
      ...seriesMSRP
    ]
  }

  return option
}

export default getPriceGradientChartOption

Dingtalk_20211015141222.jpg