echarts的api非常繁雜，想要系統(tǒng)學習既不可能也沒必要，一般都是在工作中根據(jù)需求即時地去查api。正好最近在工作中用到了折線圖和柱狀圖，查api也是花了一些時間，現(xiàn)記錄如下，以防自己下次使用的時候找下靈感。

截屏2021-11-24 下午3.19.44.png

  const funnelOption = {
    xAxis: {
      type: 'category',
      axisLine: { lineStyle: { color: '#C5C3CB' }},
      axisLabel: { textStyle: { color: '#2B2E3E' }},
      axisTick: { show: false },
      data: [
        '活動客戶數(shù)',
        '看款',
        '選款',
        '下圖上架',
        '下單',
      ],
    },
    yAxis: { show: false },
    series: [
      {
        label: {
          show: true,
          formatter(params) {
            return `  ${params.value }家${params.dataIndex ? `
{a|占比：${params.data.percentage}}` : ''}${params.dataIndex ? `
{a|環(huán)比：}{${params.data.relativeFlag ? 'c' : 'b'}|${params.data.relativeRatio}${params.data.relativeFlag ? '↑' : '↓'}}` : ''}`;
          },
          rich: {
            a: {
              lineHeight: 16,
              color: '#2B2E3E',
            },
            b: {
              lineHeight: 16,
              color: '#267FFE',
            },
            c: {
              lineHeight: 16,
              color: '#FA6F6D',
            },
          },
          position: 'top',
          textStyle: {
            color: '#2B2E3E',
            fontSize: 18,
            fontWeight: 500,
          },
        },
        data: funnelData,
        type: 'bar',
        barWidth: '50%',
      },
    ],
  };

截屏2021-11-22 上午11.46.12.png

  const salesOptions = {
    legend: {
      icon: 'rect',
      data: [
        '銷量',
        '銷售額',
      ],
      x: 'right',
    },
    color: [
      'rgba(255, 103, 13, 1)',
      'rgba(25, 120, 255, 1)',
    ],
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis,
    },
    yAxis: {
      type: 'value',
      splitLine: { show: false },
    },
    series: [
      {
        name: '銷量',
        type: 'line',
        showSymbol: false,
        smooth: true,
        lineStyle: { normal: { width: 3 }},
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 103, 13, 0.2)',
            },
            {
              offset: 1,
              color: 'rgba(250, 118, 35, 0)',
            },
          ]),
        },
        data: saleData,
      },
      {
        name: '銷售額',
        type: 'line',
        showSymbol: false,
        lineStyle: { normal: { width: 3 }},
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(25, 120, 255, 0.2)',
            },
            {
              offset: 1,
              color: 'rgba(250, 118, 35, 0)',
            },
          ]),
        },
        data: totalPriceAmount,
      },
    ],
  };