echarts的api非常繁杂，想要系统学习既不可能也没必要，一般都是在工作中根据需求即时地去查api。正好最近在工作中用到了折线图和柱状图，查api也是花了一些时间，现记录如下，以防自己下次使用的时候找下灵感。

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

  const funnelOption = {
    xAxis: {
      type: 'category',
      axisLine: { lineStyle: { color: '#C5C3CB' }},
      axisLabel: { textStyle: { color: '#2B2E3E' }},
      axisTick: { show: false },
      data: [
        '活动客户数',
        '看款',
        '选款',
        '下图上架',
        '下单',
      ],
    },
    yAxis: { show: false },
    series: [
      {
        label: {
          show: true,
          formatter(params) {
            return `  ${params.value }家${params.dataIndex ? `
{a|占比：${params.data.percentage}}` : ''}${params.dataIndex ? `
{a|环比：}{${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,
      },
    ],
  };