Echarts pie饼图示例

<template>
  <div class="demo">
    <div class="demo-title">
      <div class="title">基础图表</div>
    </div>
    <div class="demo-block">
      <div class="demo-block-title">-- 环形饼图 --</div>
      <div class="demo-block-content">
        <div id="pieCharts" style="width: 300px; height: 200px;"></div>
      </div>
    </div>
    <div class="demo-block">
      <div class="demo-block-title">-- 两饼图合成 --</div>
      <div class="demo-block-content">
        <div id="pie2Charts" style="width: 500px; height: 200px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as R from "ramda";
import { legend, tooltip, colorList } from "./utils";

// 饼图测试数据
const seriesData = [
  { value: 1048, name: "搜索引擎", rate: 0.333 },
  { value: 735, name: "直接访问", rate: 0.234 },
  { value: 580, name: "邮件营销", rate: 0.184 },
  { value: 484, name: "联盟广告", rate: 0.154 },
  { value: 300, name: "视频广告", rate: 0.095 },
];

// 计算测试数据总和
const seriesSum = R.reduce((acc, item) => acc + item.value, 0, seriesData);

const initOption = {
  // legend其他样式可查看之前的系列文章，这里显示不同的地方；默认legend是一样的
  legend: R.mergeDeepRight(legend, {
    orient: "horization", // 垂直排列
    top: 40,
    left: 180,
    itemGap: 14, // 调整每项之前的间距
    textStyle: {
      color: "#808080", // 文本颜色
    },
    // 解决legend显示百分比问题
    formatter: function(name) {
      let rate = R.propOr(
        0,
        "rate",
        R.find(R.propEq("name", name))(seriesData)
      );
      rate = (rate * 100).toFixed(1);
      // 显示名称+百分比
      return `${name} ${rate}%`;
    },
  }),
  color: colorList,
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["45%", "70%"], // 饼图的半径
      avoidLabelOverlap: false, // 防止标签重叠，默认开启
      center: [90, 102], // 饼图的中心（圆心）坐标
      label: {
        // 文本标签
        show: false,
        // position: "center", // 文本标签位置
      },
      labelLine: {
        // 引导线
        show: false,
      },
      itemStyle: {
        // 饼图白色间隙
        borderWidth: 1,
        borderColor: "#fff",
      },
      // emphasis: { // 高亮状态样式
      //   label: {
      //     show: true,
      //     fontSize: "40",
      //     fontWeight: "bold",
      //   },
      // },
    },
  ],
  dataset: {
    dimensions: ["value", "name", "rate"],
    source: seriesData,
  },
  tooltip: R.merge(tooltip, {
    trigger: "item",
    borderColor: "#fff",
    formatter: function(params) {
      // console.log(params);
      // 计算百分比时，params.percent是图表自己计算的；params.data.rate（在dimensions中定义的）是我们自己传的值
      let html = `<div style="height:auto;width: 181px;">
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;display:flex;align-items:center;line-height:1;">
            <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
              params.color
            };"></span>
            ${params.name}
          </div>
          <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
            <span>访问量</span>
            <span style="flex:1;text-align:right;">${params.data.value}</span>
          </div>
          <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
            <span>占比</span>
            <span style="flex:1;text-align:right;">${(
              params.data.rate * 100
            ).toFixed(1)}%</span>
          </div>
        </div>`;
      return html;
    },
  }),
};

let seriesObj = {
  name: "访问来源",
  type: "pie",
  radius: "90%",
  center: [186, 102],
  itemStyle: {
    borderWidth: 1,
    borderColor: "#fff",
  },
};

let initOption2 = {
  legend: R.mergeDeepRight(legend, {
    orient: "horization",
    top: 40,
    left: 360,
    itemGap: 14,
    textStyle: {
      color: "#808080",
    },
  }),
  color: colorList,
  series: [
    // 第一层
    seriesObj,
    // 第二层
    R.merge(seriesObj, {
      label: {
        show: true,
        position: "inner", // 标签的位置
        textStyle: {
          fontSize: 10, //字体大小
          color: "#fff", // 文字颜色
        },
        formatter: "{d}%", // 内容
      },
    }),
  ],
  dataset: {
    dimensions: ["value", "name", "rate"],
    source: seriesData,
  },
};

export default {
  data() {
    return {
      charts: null,
      charts2: null,
    };
  },
  mounted() {
    this.charts = this.$echarts.init(
      document.getElementById("pieCharts"),
      null,
      {
        renderer: "svg",
      }
    );
    this.charts.setOption(R.clone(initOption));

    this.charts2 = this.$echarts.init(
      document.getElementById("pie2Charts"),
      null,
      {
        renderer: "svg",
      }
    );
    this.charts2.setOption(R.clone(initOption2));
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
zptime / blog

Echarts pie饼图示例 #12
