关于echarts:Echarts-学习

版本

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

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

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

options 各项配置

title

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

legend

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

grid

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

xAxis

直角坐标系 grid 中的 x 轴，

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

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

  yAxis

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

  3/ 4 环形图实现

  <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>