echarts-象形柱图

象形柱图

一般的柱图都是纯色柱图，使用象形柱图可以给柱图定义自己的样式。
样式的调节与柱图一样，核心在于symbol调节柱图的组成。

let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",

        data: [10, 20, 42, 60],
      },
    ],
  };

使用symbol设置图形类型

 let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",
        symbol: "image://http://localhost:5173/R-C.jfif",
        data: [10, 20, 42, 60],
      },
    ],
  };

symbolRepeat:指定图形元素是否重复。
设置symbolRepeat后图形会堆叠。

let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",
        symbol: "image://http://localhost:5173/R-C.jfif",
        symbolRepeat: true,
        data: [10, 20, 42, 60],
      },
    ],
  };

设置 symbolSize调整大小后会有层叠的效果。

 let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",
        symbol: "image://http://localhost:5173/R-C.jfif",
        symbolRepeat: true,
        symbolSize: ["100%", "10%"],
        data: [10, 20, 42, 60],
      },
    ],
  };

伪3D柱状图

1.画出底部的圆圈和柱图

 let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",

        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
      },
      {
        type: "bar",
        data: [50, 50, 50, 50],
        itemStyle: {
          opacity: 0.1,
        },
        barWidth: 40,
      },
    ],
  };

symbolPosition 图形的定位位置，'end’图形边缘与柱子结束的地方内切。 symbolPosition必须设置symbolRepeat才会生效。

 let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",

        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
      },
      {
        type: "bar",
        data: [90, 90, 90, 90],
        itemStyle: {
          opacity: 0.1,
        },
        barWidth: 40,
      },
      {
        type: "pictorialBar",
        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
        symbolPosition: "end",//设置 symbolRepeat后才会生效
        symbolOffset: [0, 30],
        symbolRepeat: true,
      },
    ],
  };

barGap:不同系列的柱间距离,如果想要两个系列的柱子重叠，可以设置 barGap 为 ‘-100%’。

  let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",

        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
      },
      {
        type: "bar",
        data: [90, 90, 90, 90],
        itemStyle: {
          opacity: 0.1,
        },
        barWidth: 40,
      },
      {
        type: "pictorialBar",
        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
        symbolPosition: "end", //设置 symbolRepeat后才会生效
        symbolOffset: [0, 30],
        symbolRepeat: true,
      },
      {
        type: "bar",
        barGap: "-100%",
        barWidth: 40,
        data: [10, 20, 30, 40],
      },
    ],
  };

如果想要底部和柱状图之间有距离，可以在设置一个bar柱状图，让他们堆叠在一起，然后再设置颜色为透明的。

 let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {
      min: 0,
      max: 100,
    },
    series: [
      {
        type: "pictorialBar",

        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
      },
      {
        type: "bar",
        data: [90, 90, 90, 90],
        itemStyle: {
          opacity: 0.1,
        },
        barWidth: 40,
      },
      {
        type: "pictorialBar",
        symbolSize: [40, 10],
        data: [1, 1, 1, 1],
        z: 999,
        symbolPosition: "end", //设置 symbolRepeat后才会生效
        symbolOffset: [0, 30],
        symbolRepeat: true,
      },
      {
        type: "bar",
        barGap: "-100%",
        barWidth: 40,
        stack: "total",
        itemStyle: {
          opacity: 0,
        },
        data: [1.9, 1.9, 1.9, 1.9],
      },
      {
        type: "bar",
        barGap: "-100%",
        barWidth: 40,
        stack: "total",
        data: [10, 20, 30, 40],
      },
    ],
  };

圣诞愿望清单和山峰高度 官网例子

let options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
      axisLine: { show: false },
      axisLabel: { show: false },

      axisTick: { show: false },
    },
    yAxis: {
      min: 0,
      max: 15000,
      splitLine: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: false },
    },
    series: [
      {
        type: "pictorialBar",
        label: {
          show: true,
          position: "top",
          color: "#e54035",
        },
        data: [
          {
            Symbol: "image://" + paperDataURI,
            symbolSize: ["130%", "20%"],
            symbolRepeat: true,
            symbolMargin: "-30%",
            value: 13000,
            itemStyle: {},
            z: 900,
          },
          0,
          {
            value: 8864,
            symbol: "image://http://localhost:5173/hill-Qomolangma.png",
            //   symbolSize: ["200%", "105%"],
          },
          {
            value: 5895,
            symbol: "image://http://localhost:5173/hill-Kilimanjaro.png",
            // symbolSize: ["200%", "105%"],
          },
        ],
      },
    ],
  };