乐趣区

关于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>
    
退出移动版