饼状图

<template>
  <db-echarts-pie :options="options" :series="series"> </db-echarts-pie>
</template>
<script>
// const { DbEchartsPie } = require("@/echarts/index.js");
export default {
  data() {
    return {
      options: {
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
      },
      series: [
        {
          name: "访问来源",
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 274, name: "联盟广告" },
            { value: 235, name: "视频广告" },
            { value: 400, name: "搜索引擎" },
          ],
        },
      ],
    };
  },
  // components: {
  //   DbEchartsPie,
  // },
};
</script>

Expand Copy Copy

• 可以通过设置mode来更改当前使用的模式

<template>
  <db-echarts-pie :options="options" :series="series" mode="stair">
  </db-echarts-pie>
</template>
<script>
// const { DbEchartsPie } = require("@/echarts/index.js");
export default {
  data() {
    return {
      options: {
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
      },
      series: [
        {
          name: "访问来源",
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 274, name: "联盟广告" },
            { value: 235, name: "视频广告" },
            { value: 400, name: "搜索引擎" },
          ],
        },
      ],
    };
  },
  // components: {
  //   DbEchartsPie,
  // },
};
</script>

Expand Copy Copy

• 可以通过设置color来设置当前颜色,颜色为 色板 中的颜色
• 目前颜色配置通过色板的阶梯色实现，默认占比最大的使用最深颜色

<template>
  <db-echarts-pie :options="options" :series="series" mode="stair" color="danger">
  </db-echarts-pie>
</template>
<script>
// const { DbEchartsPie } = require("@/echarts/index.js");
export default {
  data() {
    return {
      options: {
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
      },
      series: [
        {
          name: "访问来源",
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 274, name: "联盟广告" },
            { value: 235, name: "视频广告" },
            { value: 400, name: "搜索引擎" },
          ],
        },
      ],
    };
  },
  // components: {
  //   DbEchartsPie,
  // },
};
</script>

Expand Copy Copy

• 也可以单独设置具体颜色，通过传入color为Array, 可以是色板上的颜色key也可以是具体颜色。

<template>
  <db-echarts-pie :options="options" :series="series" mode="stair" :color="colors">
  </db-echarts-pie>
</template>
<script>
// const { DbEchartsPie } = require("@/echarts/index.js");
export default {
  data() {
    return {
      options: {
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
      },
      colors: ["low"],
      series: [
        {
          name: "访问来源",
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 274, name: "联盟广告" },
            { value: 235, name: "视频广告" },
            { value: 400, name: "搜索引擎" },
          ],
        },
      ],
    };
  },
  // components: {
  //   DbEchartsPie,
  // },
};
</script>

Expand Copy Copy