Customized Pie Chart – Using Apache Echart

Here is a simple example of creating a customized pie chart using the Apache Echart library.

DEMO

See the Pen Pie Chart Using Echart by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div id="piechart1" style="width: 200px;height:200px;"></div>

JS

const pieChart = (selector, data) => {
  var myChart = echarts.init(document.getElementById(selector));

  option = {
    title: {},
    tooltip: {
      trigger: "item"
      // formatter: '{b}: {c}%'
    },
    legend: {
      show: false
    },
    series: [
      {
        name: "Liquid Tracker",
        type: "pie",
        radius: "85%",
        label: {
          show: false
        },
        itemStyle: {
          borderColor: "white",
          borderWidth: 2,
          shadowColor: "rgba(0, 0, 0, 0.5)",
          borderColor: "white",
          borderWidth: 2
          // shadowBlur: 5,
          // shadowColor: '#B8AEF9',
          // shadowOffsetX: 0,
          // shadowOffsetY: 0,
        },
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "#B8AEF9"
          }
        }
      }
    ]
  };

  myChart.setOption(option);
};

window.onload = function () {
  pieChart("piechart1", [
    { value: 1048, name: "Bitcoin", itemStyle: { color: "#F7931A" } },
    { value: 735, name: "BNB chain", itemStyle: { color: "#F3BA2F" } },
    { value: 580, name: "Tethers", itemStyle: { color: "#50AF95" } },
    { value: 484, name: "Ethereum", itemStyle: { color: "#EDF0F4" } }
  ]);

  sortButton();
};