This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Echarts icon style customization, such as pie chart spacing, custom legend, legend display percentages, prompt box customization, percentages and labels at the same time, solve the torture of detail style problems.

Ring the pie chart

Website circular pie chart example: echarts.apache.org/examples/zh…

Legend Legend position adjustment

  1. Adjust the legend position to the right of the pie chart (top.left);
  2. Adjust the arrangement of legendsorient, the default horizontal arrangement is changed to vertical arrangementhorization
  3. Solve legend display percentage problem informatterCustom function, of course, the percentage is not used by default, need to calculate their own
// Pie chart test data
const seriesData = [
  { value: 1048.name: "Search engine".rate: 0.333 },
  { value: 735.name: "Direct access".rate: 0.234 },
  { value: 580.name: "Email marketing".rate: 0.184 },
  { value: 484.name: "Affiliate advertising".rate: 0.154 },
  { value: 300.name: "Video advertising".rate: 0.095},];// Calculate the sum of test data
const seriesSum = R.reduce((acc, item) = > acc + item.value, 0, seriesData);

// legend Other styles can be seen in the previous series, which shows different places here; The default legend is the same
let legend = R.mergeDeepRight(legend, {
  orient: "horization".// Align vertically
  top: 40.left: 180.itemGap: 14.// Adjust the spacing before each item
  textStyle: {
    color: "# 808080".// Text color
  },
  formatter: function(name) {
    let rate = R.propOr(0."rate", R.find(R.propEq("name", name))(seriesData));
    rate = (rate * 100).toFixed(1);
    // Display the name + percentage
    return `${name} ${rate}% `; }});Copy the code

Pie chart base style adjustment

  1. Pie chart position (center), size (radius)
  2. Add a white gap (itemStyle.borderWidth)
let series = [
  {
    name: "Access source".type: "pie".radius: ["45%"."70%"].// Pie radius
    avoidLabelOverlap: false.// Prevent label overlap. This function is enabled by default
    center: [90.102].// Coordinates of the center of the pie chart
    label: { // Text labels
      show: false.// position: "center", // Text label position
    },
    labelLine: { / / guide line
      show: false,},itemStyle: { // Pie chart white gap
      borderWidth: 1.borderColor: "#fff",}},];Copy the code

Tooltip Tooltip box User-defined

/ / the data source
let dataset = {
  dimensions: ["value"."name"."rate"].source: seriesData,
};
let tooltip = R.merge(tooltip, {
  trigger: "item".borderColor: "#fff".formatter: function(params) {
    // console.log(params);
    // When calculating the percentage, params.percent is calculated by the chart itself;
    // params.data.rate (defined in dimensions) is the value passed by ourselves
    let html = `<div style="height:auto; width: 181px;" > <div style="font-size:14px; font-weight:bold; color:#333; margin-bottom:16px; display:flex; align-items:center; line-height:1;" > <span style="display:inline-block; margin-right:8px; border-radius:6px; width:6px; height:6px; background-color:${ params.color };" ></span>${params.name}</div> <div style="font-size:12px; color:#808080; margin-bottom:8px; display:flex; align-items:center; line-height:1;" "> <span style="flex:1; text-align:right;" >${params.data.value}</span> </div> <div style="font-size:12px; color:#808080; margin-bottom:8px; display:flex; align-items:center; line-height:1;" "> <span style="flex:1; text-align:right;" >${(params.data.rate * 100).toFixed(1)}%</span>
          </div>
        </div>`;
    returnhtml; }});Copy the code

Overall effect display

<template>
  <div id="pieCharts" style="width: 300px; height: 200px;"></div>
</template>

<script>
  import * as R from "ramda";
  export default {
    data() {
      return {
        charts: null}; },mounted() {
      // Initialize the configuration
      let option = { legend, series, dataset, tooltip };
      this.charts = this.$echarts.init(document.getElementById("pieCharts"), null, { renderer: "svg" });
      this.charts.setOption(R.clone(option)); }};</script>

<style lang="scss" scoped></style>
Copy the code

Normally the pie chart

Website pie chart example: echarts.apache.org/examples/zh…

Pie chart showing percentage inside

One pie chart is not sufficient; two pie charts must be joined together.

  1. The first layer: show the text label and the boot line labelLine
  2. Level 2: Show percentages
<template>
  <div id="pie2Charts" style="width: 500px; height: 200px;"></div>
</template>

<script>
  let seriesObj = {
    name: "Access source".type: "pie".radius: "90%".center: [186.102].itemStyle: {
      borderWidth: 1.borderColor: "#fff",}};let initOption2 = {
    legend: R.mergeDeepRight(legend, {
      orient: "horization".top: 40.left: 360.itemGap: 14.textStyle: {
        color: "# 808080",}}),color: colorList,
    series: [
      seriesObj, / / the first layer
      R.merge(seriesObj, {  / / the second floor
        label: {
          show: true.position: "inner".// Label position
          textStyle: {
            fontSize: 10.// Font size
            color: "#fff".// Text color
          },
          formatter: "{d}%"./ / content}}),].dataset: {
      dimensions: ["value"."name"."rate"].source: seriesData,
    },
  };
</script>
Copy the code