echarts基礎配置---餅圖

一、前言

• 本文銜接上兩章節、接下的幾章節將會對echarts的餅圖、柱狀圖、折線圖、堆疊柱狀圖、柱狀和折線複合圖、中國地圖、世界地圖等一一分享其基本配置。
• 本文以vue項目的基礎上作演示，js中只需引入對應文件便可。
• echarts官方文檔

二、開始開發

2.一、安裝依賴

npm install echarts --save / cnpm i -S echarts
複製代碼

2.二、繪製echarts圖形的基本流程

1. 建立一個div容器

<div id="pie"></div>
複製代碼

2. 引用echarts

import echarts from "echarts";
複製代碼

3. 初始化一個echarts實例

let myChart = echarts.init(document.getElementById("pie"));
複製代碼

4. 基本配置

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: "搜索引擎" }
        ]
      }
    ]
};
複製代碼

5. 使用配置

myChart.setOption(option)
複製代碼

6. 效果

   

三、個性化配置

3.一、legend配置

1. 如今餅圖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.二、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.三、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: "搜索引擎" }
    ]
  }
]
複製代碼

四、總結

1. 本文講述了echarts的餅圖的基本配置，其中樣式部分大多圖形都是通用後續會在其它圖形中列出差別性。
2. 文本還有不少爲描述的配置信息，能夠自行去看官方文檔。
3. 若有問題，歡迎留言。