bitacora/public/js/pages/echarts/pie-doughnut/pie-doghnut.js

$(function () {
  "use strict";
  // ------------------------------
  // Basic pie chart
  // ------------------------------
  // based on prepared DOM, initialize echarts instance
  var basicpieChart = echarts.init(document.getElementById("basic-pie"));
  var option = {
    // Add title
    title: {
      text: "Browser popularity",
      subtext: "Open source information",
      x: "center",
    },

    // Add tooltip
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },

    // Add legend
    legend: {
      orient: "vertical",
      x: "left",
      data: ["IE", "Opera", "Safari", "Firefox", "Chrome"],
    },

    // Add custom colors
    color: ["#ffbc34", "#00acc1", "#212529", "#f62d51", "#1e88e5"],

    // Display toolbox
    toolbox: {
      show: true,
      orient: "vertical",
      feature: {
        mark: {
          show: true,
          title: {
            mark: "Markline switch",
            markUndo: "Undo markline",
            markClear: "Clear markline",
          },
        },
        dataView: {
          show: true,
          readOnly: false,
          title: "View data",
          lang: ["View chart data", "Close", "Update"],
        },
        magicType: {
          show: true,
          title: {
            pie: "Switch to pies",
            funnel: "Switch to funnel",
          },
          type: ["pie", "funnel"],
          option: {
            funnel: {
              x: "25%",
              y: "20%",
              width: "50%",
              height: "70%",
              funnelAlign: "left",
              max: 1548,
            },
          },
        },
        restore: {
          show: true,
          title: "Restore",
        },
        saveAsImage: {
          show: true,
          title: "Same as image",
          lang: ["Save"],
        },
      },
    },

    // Enable drag recalculate
    calculable: true,

    // Add series
    series: [
      {
        name: "Browsers",
        type: "pie",
        radius: "70%",
        center: ["50%", "57.5%"],
        data: [
          { value: 335, name: "IE" },
          { value: 310, name: "Opera" },
          { value: 234, name: "Safari" },
          { value: 135, name: "Firefox" },
          { value: 1548, name: "Chrome" },
        ],
      },
    ],
  };

  basicpieChart.setOption(option);
  // ------------------------------
  // Basic pie chart
  // ------------------------------
  // based on prepared DOM, initialize echarts instance
  var basicdoughnutChart = echarts.init(
    document.getElementById("basic-doughnut")
  );
  var option = {
    // Add title
    title: {
      text: "Browser popularity",
      subtext: "Open source information",
      x: "center",
    },

    // Add legend
    legend: {
      orient: "vertical",
      x: "left",
      data: ["Internet Explorer", "Opera", "Safari", "Firefox", "Chrome"],
    },

    // Add custom colors
    color: ["#ffbc34", "#00acc1", "#212529", "#f62d51", "#1e88e5"],

    // Display toolbox
    toolbox: {
      show: true,
      orient: "vertical",
      feature: {
        mark: {
          show: true,
          title: {
            mark: "Markline switch",
            markUndo: "Undo markline",
            markClear: "Clear markline",
          },
        },
        dataView: {
          show: true,
          readOnly: false,
          title: "View data",
          lang: ["View chart data", "Close", "Update"],
        },
        magicType: {
          show: true,
          title: {
            pie: "Switch to pies",
            funnel: "Switch to funnel",
          },
          type: ["pie", "funnel"],
          option: {
            funnel: {
              x: "25%",
              y: "20%",
              width: "50%",
              height: "70%",
              funnelAlign: "left",
              max: 1548,
            },
          },
        },
        restore: {
          show: true,
          title: "Restore",
        },
        saveAsImage: {
          show: true,
          title: "Same as image",
          lang: ["Save"],
        },
      },
    },

    // Enable drag recalculate
    calculable: true,

    // Add series
    series: [
      {
        name: "Browsers",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "57.5%"],
        itemStyle: {
          normal: {
            label: {
              show: true,
            },
            labelLine: {
              show: true,
            },
          },
          emphasis: {
            label: {
              show: true,
              formatter: "{b}" + "\n\n" + "{c} ({d}%)",
              position: "center",
              textStyle: {
                fontSize: "17",
                fontWeight: "500",
              },
            },
          },
        },

        data: [
          { value: 335, name: "Internet Explorer" },
          { value: 310, name: "Opera" },
          { value: 234, name: "Safari" },
          { value: 135, name: "Firefox" },
          { value: 1548, name: "Chrome" },
        ],
      },
    ],
  };

  basicdoughnutChart.setOption(option);
  // ------------------------------
  // customized chart
  // ------------------------------
  // based on prepared DOM, initialize echarts instance
  var customizedChart = echarts.init(
    document.getElementById("customized-chart")
  );
  var option = {
    backgroundColor: "#fff",

    title: {
      text: "Customized Pie",
      left: "center",
      top: 20,
      textStyle: {
        color: "#ccc",
      },
    },

    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1],
      },
    },
    series: [
      {
        name: "Browsers",
        type: "pie",
        radius: "55%",
        center: ["50%", "50%"],
        data: [
          { value: 335, name: "Firefox" },
          { value: 310, name: "Safari" },
          { value: 274, name: "IE" },
          { value: 235, name: "Opera" },
          { value: 400, name: "Chrome" },
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: "radius",
        label: {
          normal: {
            textStyle: {
              color: "rgba(0, 0, 0, 0.3)",
            },
          },
        },
        labelLine: {
          normal: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.3)",
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
        },
        itemStyle: {
          normal: {
            color: "#1e88e5",
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },

        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return Math.random() * 200;
        },
      },
    ],
  };

  customizedChart.setOption(option);
  // ------------------------------
  // Nested chart
  // ------------------------------
  // based on prepared DOM, initialize echarts instance
  var nestedChart = echarts.init(document.getElementById("nested-pie"));
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },

    // Add legend
    legend: {
      orient: "vertical",
      x: "left",
      data: [
        "Italy",
        "Spain",
        "Austria",
        "Germany",
        "Poland",
        "Denmark",
        "Hungary",
        "Portugal",
        "France",
        "Netherlands",
      ],
    },

    // Add custom colors
    color: ["#ffbc34", "#00acc1", "#212529", "#f62d51", "#1e88e5"],

    // Display toolbox
    toolbox: {
      show: true,
      orient: "vertical",
      feature: {
        mark: {
          show: true,
          title: {
            mark: "Markline switch",
            markUndo: "Undo markline",
            markClear: "Clear markline",
          },
        },
        dataView: {
          show: true,
          readOnly: false,
          title: "View data",
          lang: ["View chart data", "Close", "Update"],
        },
        magicType: {
          show: true,
          title: {
            pie: "Switch to pies",
            funnel: "Switch to funnel",
          },
          type: ["pie", "funnel"],
        },
        restore: {
          show: true,
          title: "Restore",
        },
        saveAsImage: {
          show: true,
          title: "Same as image",
          lang: ["Save"],
        },
      },
    },

    // Enable drag recalculate
    calculable: false,

    // Add series
    series: [
      // Inner
      {
        name: "Countries",
        type: "pie",
        selectedMode: "single",
        radius: [0, "40%"],

        // for funnel
        x: "15%",
        y: "7.5%",
        width: "40%",
        height: "85%",
        funnelAlign: "right",
        max: 1548,

        itemStyle: {
          normal: {
            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
          },
          emphasis: {
            label: {
              show: true,
            },
          },
        },

        data: [
          { value: 535, name: "Italy" },
          { value: 679, name: "Spain" },
          { value: 1548, name: "Austria" },
        ],
      },

      // Outer
      {
        name: "Countries",
        type: "pie",
        radius: ["60%", "85%"],

        // for funnel
        x: "55%",
        y: "7.5%",
        width: "35%",
        height: "85%",
        funnelAlign: "left",
        max: 1048,

        data: [
          { value: 535, name: "Italy" },
          { value: 310, name: "Germany" },
          { value: 234, name: "Poland" },
          { value: 135, name: "Denmark" },
          { value: 948, name: "Hungary" },
          { value: 251, name: "Portugal" },
          { value: 147, name: "France" },
          { value: 202, name: "Netherlands" },
        ],
      },
    ],
  };

  nestedChart.setOption(option);
  // ------------------------------
  // pole chart
  // ------------------------------
  // based on prepared DOM, initialize echarts instance
  var poleChart = echarts.init(document.getElementById("pole-chart"));
  // Data style
  var dataStyle = {
    normal: {
      label: { show: false },
      labelLine: { show: false },
    },
  };

  // Placeholder style
  var placeHolderStyle = {
    normal: {
      color: "rgba(0,0,0,0)",
      label: { show: false },
      labelLine: { show: false },
    },
    emphasis: {
      color: "rgba(0,0,0,0)",
    },
  };
  var option = {
    title: {
      text: "Are you Satisfied?",
      subtext: "Ahmedabad, India",
      x: "center",
      y: "center",
      itemGap: 10,
      textStyle: {
        color: "rgba(30,144,255,0.8)",
        fontSize: 19,
        fontWeight: "500",
      },
    },

    // Add tooltip
    tooltip: {
      show: true,
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },

    // Add legend
    legend: {
      orient: "vertical",
      x: document.getElementById("pole-chart").offsetWidth / 2,
      y: 30,
      x: "55%",
      itemGap: 15,
      data: [
        "60% Definitely yes",
        "30% Could be better",
        "10% Not at the moment",
      ],
    },

    // Add custom colors
    color: ["#1e88e5", "#00acc1", "#f62d51"],

    // Add series
    series: [
      {
        name: "1",
        type: "pie",
        clockWise: false,
        radius: ["75%", "90%"],
        itemStyle: dataStyle,
        data: [
          {
            value: 60,
            name: "60% Definitely yes",
          },
          {
            value: 40,
            name: "invisible",
            itemStyle: placeHolderStyle,
          },
        ],
      },

      {
        name: "2",
        type: "pie",
        clockWise: false,
        radius: ["60%", "75%"],
        itemStyle: dataStyle,
        data: [
          {
            value: 30,
            name: "30% Could be better",
          },
          {
            value: 70,
            name: "invisible",
            itemStyle: placeHolderStyle,
          },
        ],
      },

      {
        name: "3",
        type: "pie",
        clockWise: false,
        radius: ["45%", "60%"],
        itemStyle: dataStyle,
        data: [
          {
            value: 10,
            name: "10% Not at the moment",
          },
          {
            value: 90,
            name: "invisible",
            itemStyle: placeHolderStyle,
          },
        ],
      },
    ],
  };
  poleChart.setOption(option);
  // ------------------------------
  // nightingale chart
  // ------------------------------
  // based on prepared DOM, initialize echarts instance
  var nightingaleChart = echarts.init(
    document.getElementById("nightingale-chart")
  );
  var option = {
    title: {
      text: "Employee's salary review",
      subtext: "Senior front end developer",
      x: "center",
    },

    // Add tooltip
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: +{c}$ ({d}%)",
    },

    // Add legend
    legend: {
      x: "left",
      y: "top",
      orient: "vertical",
      data: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ],
    },

    color: [
      "#ffbc34",
      "#00acc1",
      "#212529",
      "#f62d51",
      "#1e88e5",
      "#FFC400",
      "#006064",
      "#FF1744",
      "#1565C0",
      "#FFC400",
      "#64FFDA",
      "#607D8B",
    ],

    // Display toolbox
    toolbox: {
      show: true,
      orient: "vertical",
      feature: {
        mark: {
          show: true,
          title: {
            mark: "Markline switch",
            markUndo: "Undo markline",
            markClear: "Clear markline",
          },
        },
        dataView: {
          show: true,
          readOnly: false,
          title: "View data",
          lang: ["View chart data", "Close", "Update"],
        },
        magicType: {
          show: true,
          title: {
            pie: "Switch to pies",
            funnel: "Switch to funnel",
          },
          type: ["pie", "funnel"],
        },
        restore: {
          show: true,
          title: "Restore",
        },
        saveAsImage: {
          show: true,
          title: "Same as image",
          lang: ["Save"],
        },
      },
    },

    // Enable drag recalculate
    calculable: true,

    // Add series
    series: [
      {
        name: "Increase (brutto)",
        type: "pie",
        radius: ["15%", "73%"],
        center: ["50%", "57%"],
        roseType: "area",

        // Funnel
        width: "40%",
        height: "78%",
        x: "30%",
        y: "17.5%",
        max: 450,
        sort: "ascending",

        data: [
          { value: 440, name: "January" },
          { value: 260, name: "February" },
          { value: 350, name: "March" },
          { value: 250, name: "April" },
          { value: 210, name: "May" },
          { value: 350, name: "June" },
          { value: 300, name: "July" },
          { value: 430, name: "August" },
          { value: 400, name: "September" },
          { value: 450, name: "October" },
          { value: 330, name: "November" },
          { value: 200, name: "December" },
        ],
      },
    ],
  };
  nightingaleChart.setOption(option);
  //------------------------------------------------------
  // Resize chart on menu width change and window resize
  //------------------------------------------------------
  $(function () {
    // Resize chart on menu width change and window resize
    $(window).on("resize", resize);
    $(".sidebartoggler").on("click", resize);

    // Resize function
    function resize() {
      setTimeout(function () {
        // Resize chart
        basicpieChart.resize();
        basicdoughnutChart.resize();
        customizedChart.resize();
        nestedChart.resize();
        poleChart.resize();
      }, 200);
    }
  });
});