echarts基础图表3

image.png

let sexLine = {
  color: [
    "rgba(13, 196, 170, 0.2)",
    "rgba(255, 183, 52, 0.2)",
    "rgba(183, 188, 187, 0.2)",
  ],
  tooltip: {
    show: true,
    backgroundColor: "rgb(0,0,0)",
    borderWidth: 0,
    padding: 20,
    trigger: "axis",
    axisPointer: {
      type: "line",
    },
    textStyle: {
      color: "#B7BCBB",
    },
    formatter: (res) => {
      return `<div style="font-size: 18px;color: #008EFF;margin-bottom: 5px;font-weight: bold;">${res[0].name}</div>
      <div style="margin-bottom: 5px">
        <span style="display: inline-block;border-radius: 50%; width: 10px;height:10px;background-color:#62A8FFFF;margin-right: 5px"></span>
         <span style="margin-right: 30px">${res[0].seriesName}</span>\t
          <span style="color: #008EFF;text-align: right;width: 40px;    display: inline-block;">${res[0].value}家</span>
        </div>
      <div style="margin-bottom: 5px">
        <span style="display: inline-block;border-radius: 50%; width: 10px;height:10px;background-color:#FFBE2FFF;margin-right: 5px"></span>
        <span style="margin-right: 85px;">${res[1].seriesName}</span>\t
        <span style="color: #008EFF; text-align: right;width: 40px; display: inline-block;">${res[1].value}%</span>
   </div>
`;
    },
  },
  xAxis: {
    type: "category",
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(0,0,0,0)",
      },
    },
    axisTick: {
      show: true,
    },
    axisLabel: {
      show: true,
      color: "rgba(240,240,240,0.7)",
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: "solid",
        color: "rgba(0,0,0,0.1)",
      },
    },
    boundaryGap: true,
    data: ["陕西", "河北", "上海", "北京", "甘肃"],
  },
  yAxis: [
    {
      name: "万人次",
      type: "value",
    },
    {
      type: "value",
      splitLine: {
        show: false,
      },
      axisLabel: {
        formatter: function (value) {
          return value;
        },
      },
      name: "%",
      nameTextStyle: {
        padding: [0, 0, 0, 30],
      },
    },
  ],
  grid: {
    top: "20%",
    right: "3%",
    y: 20,
    y2: 20,
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    icon: "rect",
    yAxisIndex: 0,
    textStyle: {
      color: "#B7BCBB",
    },
    right: 50,
  },
  series: [
    {
      name: "累计成交金额",
      type: "bar",
      barWidth: 14,
      // stack: "Ad",

      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(1,144,255,0.8)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(98,168,255,0)", // 100% 处的颜色
            },
          ],
        },
      },
      // data: [100, 150, 230, 100, 150, 100, 100, 150, 100, 100],
      data: [543, 4267, 6334, 3165, 7746, 5112, 4935, 1203, 1568, 1612],
    },
    {
      data: [43, 4657, 2334, 2165, 3746, 4112, 2935, 1203, 1468, 1122],
      type: "line",
      name: "客流",
      smooth: false,
      barWidth: 20,
      yAxisIndex: 1,
      symbolSize: 8,
      itemStyle: {
        color: "rgb(248,185,48)",
      },
      lineStyle: {
        type: "dashed",
      },
    },
  ],
};