关于echarts:Echarts-学习

留神 Echarts 的版本，新旧版本有些语法不同，例：

series:[
    type:'bar',
    itemStyle:{barBorderRadius: 5}
]

旧版本外面边框圆角设置用 barBorderRadius，
而新版本应用 borderRadius 设置。

题目组件：顾名思义就是设置题目相干属性

图例组件：展示不同系列的标记，个别通过标记过滤数据

直角坐标系内绘图网格，个别用于设置坐标系地位

直角坐标系 grid 中的 x 轴，

xAxis. interval
number
强制设置坐标轴宰割距离。
xAxis. silent
boolean
坐标轴是否是动态无奈交互。

xAxis. gridIndex
number
x 轴所在的 grid 的索引，默认位于第一个 grid。多个 x 轴时须要指定

yAxis
直角坐标系 grid 中的 y 轴，根本同上。
留神 xAxis,yAxis 密不可分，即 x 轴，y 轴要么都写，要么都不写。若只须要显示一个则指定另一个 show 为 false。

<script>
export default {data () {
  return {ectOpts: {},
    data: [],};
},
computed: {total () {let total = this.data.reduce((item1, item2) => {return (typeof item1 === "number" ? item1 : item1.num) + item2.num;
    });
    return total;
  },
},
created () {this.getData();
},
mounted () {this.initEchart();
},
methods: {getData () {
    this.data = [{ name: "钱包领取", num: 13210},
      {name: "现金支付", num: 42111},
      {name: "记账领取", num: 81711},
      {name: "挪动领取", num: 121700},
    ];
    this.data.forEach((item) => {item.percent = ((item.num / this.total) * 100).toFixed(1);
    });
  },
  initEchart () {
    let color = ["rgba(255, 135, 0, 1)",
      "rgba(255, 195, 0, 1)",
      "rgba(0, 228, 115, 1)",
      "rgba(0, 157, 255, 1)",
    ].reverse();
    let pieSeries = [];
    let lineYAxis = [];
    this.data.forEach((item, index) => {
      let iname = item.name;
      let inum = item.num;
      pieSeries.push({
        name: iname,
        type: "pie",
        radius: [65 - 15 * index + "%", 57 - 15 * index + "%"],
        // 敞开悬停动画
        hoverAnimation: false,
        // 是否逆时针旋转
        clockwise: false,
        center: ["30%", "50%"],
        label: {show: false,},
        data: [
          {
            // 只设置 3 / 4 的值，以用于 3 / 4 环形图
            value: inum * 0.75,
            name: iname,
          },
          {
            // 这里的值 + 下面的值为总和，然而只占比 75%
            value: (this.total - inum) * 0.75,
            itemStyle: {color: "rgba(0, 132, 251, 0.2)",
            },
          },
          {
            // 弃用 25% 的环形图不做显示
            value: this.total * 0.25,
            itemStyle: {color: "rgba(0,0,0,0)",
            },
          },
        ],
      });
      lineYAxis.push({
        value: index,
        textStyle: {
          rich: {
            circle: {color: color[index],
              padding: [0, 5],
            },
          },
        },
      });
    });
    this.ectOpts = {
      tooltip: {
        trigger: "item",
        // formatter: '{a} <br/>{b}: {c} ({d}%)',
        formatter: (item) => {return (item.percent / 0.75).toFixed(1) + "%";
        },
      },
      color,
      grid: {
        top: "15%",
        bottom: "54%",
        left: "30%",
        containLabel: false,
      },
      // 有 yAxis 必须有 xAxis
      xAxis: [{show: false}],
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {show: false,},
          axisTick: {show: false,},
          axisLabel: {formatter: (params) => {let item = this.data[params];
              return `{line|··················}{circle|●}{name|${item.name}：}{value|${item.num} 辆，}{percent| 占 ${item.percent}%}`;
            },
            interval: 0,
            inside: true,
            rich: {
              line: {
                width: 50,
                height: 1,
                color: "rgba(236, 236, 236, 1)",
                // borderType: "dashed",
                // borderColor: "#D9DFEB",
                // borderWidth: 1,
              },
              bd: {padding: [0, 5],
              },
              value: {
                // fontSize: 15,
                // fontWeight: 500,
              },
            },
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
            show: true,
          },
          data: lineYAxis,
        },
      ],
      series: pieSeries,
    };
  },
},
};
</script>

关于echarts:Echarts-学习

版本

options 各项配置

title

legend

grid

xAxis

yAxis

3/ 4 环形图实现