echarts饼图使用的一些总结

基本的配置搞定，主要记录一下一些可能会常用的属性

legend配置

legend: {
  orient: "horizontal", // horizontal/vertical,默认horizontal
  // x: "left", // x方向位置,left/right
  // y: 'bottom', // y方向位置,top/bottom
  left: 'center', // 距离左边的位置、距离 (值可以是'left', 'center', 'right'，或者具体的数值)
  // right: 10, 
  // top: 10,
  bottom: 30,
  itemGap: 10, // 间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
  itemWidth: 50, //图形宽度
  itemHeight: 10, //图形高度
  padding: 10, // 图例内边距。
  textStyle: {
    fontSize: 16, // 字体大小
    color: "#999EE0" // 字体颜色
  },
  formatter: function (params) { // 格式化图例，支持字符串模板和回调函数
    console.log(params) // 多个参数时可以格式化格式
    return params
  },
  data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
}

tooltip配置

tooltip: {
  show: true,// 是否显示提示,true/false,默认true
  trigger: "item",// 触发类型, item/axis/none
  backgroundColor: 'rgba(0,0,0,.5)',// 提示框背景
  borderWidth: 1, // 提示框边框大小
  padding: 10,// 提示框内边距
  borderColor: '#ff0000',// 提示框边框颜色
  formatter: "{a} <br/>{b}: {c} ({d}%)",// 提示格式，支持回调函数
  textStyle: {
    color: '#0DB9DF', // 提示文字样式
    fontStyle: 'normal', // 提示文字风格，normal,italic,oblique
    fontWeight: 'normal', // 提示文字粗细， normal,bold,bolder,lighter,100~900
    fontFamily: 'sans-serif', //提示文字字体， 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
    fontSize: 14, //字体大小
    lineHeight: 28, //字体行高
    rich: {
      a: {
        lineHeight: 28 // 没有设置则继承textStyle的 `lineHeight`，
      }
    }
  }
},

formatter可以自定义格式

  formatter: function(params) {
    var res = "";
    res = `<span style="color:#fff;padding: 10px;line-height: 28px;">${params.name}</span><br />
    <span style="color:#0DB9DF;padding: 10px;line-height: 28px;">${ params.percent}%</span>
    <span style="color:#FC6961;padding: 10px;line-height: 28px;">${params.value} 元</span>`;
    return res;
  }

series配置

series: [
  {
    name: "访问来源",
    type: "pie",
    radius: ["50%", "70%"], // 饼图的范围
    center: ["50%", "42%"], // 中心位置。默认都是50%
    avoidLabelOverlap: false,
    color: [ // 颜色，按循序使用
      "#faa41b",
      "#fc6961",
      "#fc4190",
      "#6a01d7",
      "#3a02d7",
      "#0309d9",
      "#065cfd",
      "#06c3fd",
      "#0cffbf"
    ],
    label: { // 视觉引导的文本
      normal: {
        show: false, // 是否显示视觉引导线
        position: "center", // 标签的位置。outside/inside/center
        // color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 12,
        align: 'left'
        formatter: '{b}: {d}' // 格式，支持回调
      },
      emphasis: {
        show: true,
        textStyle: {
          fontSize: "30",
          fontWeight: "bold"
        }
      }
    },
    labelLine: { // 视觉引导线的配置
      normal: {
        show: true
      }
    },
    data: [ // 数据源，支持多参数
      { value: 335, name: "直接访问" },
      { value: 310, name: "邮件营销" },
      { value: 234, name: "联盟广告" },
      { value: 135, name: "视频广告" },
      { value: 1548, name: "搜索引擎" }
    ]
  }
]