echarts图表个性化

最近在做 echarts,其中有一些个性化的需求,再次做类似需求,需要重新摸索,所以在此记录一下

1.横向多柱状图多维度&柱子 hover 个性化

• 多维度

 {
     xAxis: [
          {
              name: "数量(枚)",
              nameLocation: "end",
              nameGap: "20",
              type: "value",
              position: "top",
              boundaryGap: [0, 0.01],
            },
            {
              name: "使用进度(%)",
              nameLocation: "end",
              nameGap: "20",
              type: "value",
              position: "bottom",
              boundaryGap: ["10%", "10%"],
            },
          ],
  //对应数据多维
    series: [
            {
              name: "预算数量",
              type: "bar",
              data: [
                { percent: "89%", value: 234 },
                { percent: "12%", value: 290 },
                { percent: "33%", value: 104 },
                { percent: "78%", value: 630 },
              ],
            },
            {
              name: "发放数量",
              type: "bar",
              data: [
                { percent: "98%", value: 121 },
                { percent: "12%", value: 234 },
                { percent: "67%", value: 310 },
                { percent: "45%", value: 681 },
              ],
            },
            {
              name: "发放进度",
              type: "bar",
              xAxisIndex: 1,
              data: [88.27, 108.17, 85.35, 108.17],
            },
          ],
 }

• hover 效果个性化调整

{
    ...
  tooltip: {
            trigger: "item",
            formatter: function (params) {
              let rt = "";
              if (params.seriesName === "发放进度") {
                rt = `<div>
                      ${params.seriesName}
                      <div style="margin-top:5px;">
                      ${params.marker}
                      ${params.name}
                  <b style="margin-left:10px;">${params.value}%</b>
                  </div>
                </div>`;
              } else {
                rt = `<div>
                      ${params.seriesName}
                      <div style="margin-top:5px;">
                      ${params.marker}
                      ${params.name}
                  <b style="margin-left:10px;">${params.value}</b>
                        环比:
                  <b style="margin-left:5px;">${params.data.percent}</b>
                  </div>
                </div>`;
              }
              return rt;
            },
          },
    ...
}

2.多维度 hover & 个性化 legend 提示可 hover 并模拟 icon

• 多维度 hover

{
    ...
      tooltip: {
            trigger: "axis",
            formatter: function (params) {
              let rt = "";
              let barTotal = 0;
              params.forEach((v) => {
                barTotal += v.value;
                rt += `<div>
                        ${v.marker}
                        ${v.seriesName}:
                        <b style="margin-left:10px;">${v.value}</b>
                        环比:
                  <b style="margin-left:5px;">${v.data.ringPercet}%</b>
                        占比:
                  <b style="margin-left:5px;">${v.data.occupyPercent}%</b>
                  </div>`;
              });
              rt =
                `<div>
                        <span style="margin-left:18px;"></span>
                        合计
                        <b style="margin-left:10px;">${barTotal}</b>
                        <span style="margin-left:74px;">环比:</span>
                  <b style="margin-left:5px;">${1}%</b>
                  </div>` + rt;
              return rt;
            },
          },
    ...
}

• legend 提示可 hover 并模拟 icon

{
    ...
    legend: {
            data: [
              "a用户人数",
              "b用户人数",
              "a发放次数",
              "b发放次数",
            ],
            bottom: "0",
            tooltip: {
              show: true,
              formatter: (params) => {
                return "发放给a,b用户的数量";
              },
              // trigger: "item",
            },
            // 此处模拟icon图标
            textStyle: {
              fontSize: 24,
              rich: {
                one: {
                  color: "#000",
                  fontSize: 13,
                },
                two: {
                  width: 14,
                  height: 14,
                  lineHeight: 14,
                  borderRadius: 50,
                  color: "#fff",
                  backgroundColor: "#ccc",
                  fontSize: 10,
                  align: "right",
                  verticalAlign: "middle",
                },
              },
            },
            formatter: function (name) {
              // ❔ �
              return `{one|${name}} {two| ？}`;
            },
          },
          ...
}

3.直方图

• 直方图的数据

{
    ...
 series: [
            {
              type: "custom",
              renderItem: function (params, api) {
                var yValue = api.value(2);
                var start = api.coord([api.value(0), yValue]);
                var size = api.size([api.value(1) - api.value(0), yValue]);
                var style = api.style();
                return {
                  type: "rect",
                  shape: {
                    x: start[0],
                    y: start[1],
                    width: size[0] - 1,
                    height: size[1],
                  },
                  style: style,
                };
              },
              label: {
                //   show: true,
                position: "top",
              },
              dimensions: [],
              encode: {
                x: [0, 1],
                y: 2,
                tooltip: [3],
                itemName: 1,
              },
              data: [
              //value数组中1,2是分割区间(数量),3是人数
                { value: [0, 8000, 3], percent: 24 },
                { value: [8000, 16000, 15], percent: 24 },
                { value: [16000, 24000, 12], percent: 24 },
                { value: [24000, 32000, 22], percent: 24 },
                { value: [32000, 40000, 7], percent: 24 },
                { value: [40000, 48000, 17], percent: 24 },
                { value: [48000, 56000, 13], percent: 24 },
                { value: [56000, 64000, 16], percent: 24 },
                { value: [64000, 72000, 45], percent: 24 },
                { value: [72000, 80000, 19], percent: 24 },
              ],
            },
          ],
    ...
}

• main.js 注册

...
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
...

• package.json

"echarts": "^5.4.1",