echarts基础配置---饼图

1、前言

本文衔接上两章节、接下的几章节将会对echarts的饼图、柱状图、折线图、堆叠柱状图、柱状和折线复合图、中国地图、世界地图等一一分享其基本配置。
本文以vue项目的基础上做演示，js中只需引入对应文件即可。
echarts官方文档

2、开始开发

2.1、安装依赖

npm install echarts --save / cnpm i -S echarts

2.2、绘制echarts图形的基本流程

创建一个div容器

<div id="pie"></div>

引用echarts

import echarts from "echarts";

初始化一个echarts实例

let myChart = echarts.init(document.getElementById("pie"));

基本配置

let option = {
    tooltip: { // 提示
      trigger: "item", // 触发方式
      formatter: "{a} <br/>{b}: {c} ({d}%)"  // 提示的格式
    },
    legend: { // 图例
      orient: "vertical", 
      x: "left",
      data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
    },
    series: [
      {
        name: "访问来源",
        type: "pie", // 图标的类型
        radius: ["50%", "70%"], // 饼图的范围
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold"
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: "直接访问" },
          { value: 310, name: "邮件营销" },
          { value: 234, name: "联盟广告" },
          { value: 135, name: "视频广告" },
          { value: 1548, name: "搜索引擎" }
        ]
      }
    ]
};

使用配置

myChart.setOption(option)

效果

3、个性化配置

3.1、legend配置

现在饼图legend在左上角,我们来修改它，让它可以出现在其它位置。

修改x,y的值
legend: { // 图例
  orient: "vertical", 
  x: "left", // left/right
  y: 'top', // top/bottom
  data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},

效果如下

修改orient的值改变legend的方向。
legend: { // 图例
  orient: "horizontal",  // horizontal/vertical,默认horizontal
  x: "left",
  y: 'top',
  data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},

修改left、right、top、bottom的值，调整legend位置,值可以是'left', 'center', 'right'，或者具体的数值
legend: {
  orient: "horizontal",
  // x: "left",
  // y: 'bottom',
  left: 'center',
  // right: 10,
  // top: 10,
  bottom: 30,
  data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
}

组合上面的参数使用就可以出现在图上的任何一个位置了。下面贴上一下其它配置：

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: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
}

3.2、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;
  }

3.3、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: "搜索引擎" }
    ]
  }
]

4、总结

本文讲述了echarts的饼图的基本配置，其中样式部分大多图形都是通用后续会在其它图形中列出差异性。
文本还有很多为描述的配置信息，可以自行去看官方文档。
如有问题，欢迎留言。