ECharts 饼状图基数使用方法说明

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="minBox" style="width: 40rem; height: 40rem"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("minBox"));
    // 绘制图表
    myChart.setOption({
      title: {
        // text: "ECharts",
      },
      // y轴显示顶部数值
      label: {
        show: true,
        // 使用普通字符串
        // formatter: "Legend",

        // 饼状图文字显示
        formatter: function (arg) {
          return (
            arg.name + " 消费 " + arg.value + " 元" + "\n" + arg.percent + "%"
          );
        },
      },
      tooltip: {
        trigger: "item",
      },
      // 功能 展示
      toolbox: {
        show: true, // show: true ? 显示功能 : 不显示
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false }, // 数据视图
          restore: { show: true }, // 还原
          saveAsImage: { show: true }, // 下载 ECharts 成图片
        },
      },
      // color: "red", // 全局颜色
      // 饼状图 颜色实例展示
      legend: {
        orient: "horizontal", // 显示方式 vertical: 垂直显示 horizontal: 水平显示
        x: "center", // X轴显示位置 left: 左侧; right:右侧; center:居中
        y: "top", // Y轴现实中位置 top: 顶部; bottom:底部; center:集中
        backgroundColor: "#FFDAB9", // 背景颜色
        borderColor: "#FF4500", // 边框颜色
        // borderWidth: 20, // 边框宽度
        // padding: 10, // 内边距
        itemGap: 10, // 每一项图咧之间的间距
        itemHeight: 20, // 每一项图咧的高度
        textStyle: {
          // 图咧文字的样式
          color: "red",
          fontSize: "12px",
          fontWeight: 700,
        },
        // 是否不显示某些数据
        selected: {
          你好: false, // 数据名字: false-> 文字为灰色 切不显示当前项数据 饼状图也不会显示
        },
        // 可以单独对图例中某个选项进行单独设置样式
        data: [
          {
            name: "你好",
            icon: "circle",
            textStyle: {
              fontWeight: "bold",
              color: "orange",
            },
          },
          "rose 1",
          "rose 2",
          "rose 3",
          "rose 4",
          "rose 6",
        ],
      },
      // 调整折线图的边距和位置
      grid: {
        left: "5%", //距离左侧边距
        right: "10%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        // 第一条 线
        {
          name: "销量", // 鼠标划入提示框标题文字
          type: "pie",
          animation: true, //动画的缓动方式
          animationEasing: "cubicOut", //动画的缓动方式
          // animationDuration: 450, //持续时间
          startAngle: 180,
          // radius当 一个值 字符串 为圆形; 两个值 数组 为圆环;
          // radius: "50%", // 圆形大小
          // radius: ["60%", "20%"], // 第一个值 圆环宽度；第二个值 圆环大小
          radius: [50, 250], // 不带单位 环形风车状
          roseType: "area", // 根据值的大小 来展示每一块的大小
          itemStyle: {
            borderRadius: 10, // 每一块的圆角弧度
            borderColor: "#fff", // 每一块边框颜色
            borderWidth: 2, // 每一块间距
          },
          // 是否显示提示文字标签
          label: {
            show: true, // show：true ? "显示" : 不显示
            color: "rgba(0, 0, 0, 0.5)", // 标题展示颜色
          },
          data: [
            { value: 1048, name: "你好" },
            { value: 40, name: "rose 1" },
            { value: 38, name: "rose 2" },
            { value: 32, name: "rose 3" },
            { value: 30, name: "rose 4" },
            { value: 28, name: "rose 5" },
            { value: 26, name: "rose 6" },
            { value: 22, name: "rose 7" },
            { value: 18, name: "rose 8" },
          ],
        },
      ],
      // 鼠标划入 样式
      emphasis: {
        itemStyle: {
          shadowBlur: 20, // 阴影大小
          shadowOffsetX: 10, // 阴影距离
          shadowColor: "rgba(0, 0, 0, 0.3)", // 阴影颜色
          normal: {
            //这里是重点
            color: function (params) {
              //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              var colorList = ["#FC8D52", "#48CFAE", "#FFCE55"];
              return colorList[params.dataIndex];
            },
          },
        },
      },
    });
  },
};
</script>