OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Nested rich (Rich Text - echarts)

  • Thread starter Thread starter neves
  • Start date Start date
N

neves

Guest
I tried using nested rich to align text to the center of a rich: bg section. But, the nesting doesn't work:

Code:
formatter: function(params) {
  const nome = params.name;
  const valor = params.value;
        
  return ["{bg| {center|"+nome+"}}",
  "{c|Content}"].join("\n");
}

If I don't nest, the text appears, but not center aligned.

Code:
formatter: function(params) {
  const nome = params.name;
  const valor = params.value;
        
  return ["{bg|"+nome+"}",
  "{c|Content}"].join("\n");
}

Complete code:


Code:
document.addEventListener("DOMContentLoaded", function() {

  const myChartUse = echarts.init(document.getElementById("myChart"));

  option = {

    series: [{

      type: "pie",
      radius: ["70%", "55%"],
      padAngle: 5,
      itemStyle: {
        normal: {
          borderRadius: 5
        },
        emphasis: {
          color: "#40bcac"
        }
      },
      label: {
        borderWidth: 2,
        width: 120,
        padding: 2,
        borderColor: "#020202",
        formatter: function(params) {
          const nome = params.name;
          const valor = params.value;

          return ["{bg| " + nome + "}",
            "{c|Content}"
          ].join("\n");
        },
        rich: {
          bg: {
            backgroundColor: "#020202",
            color: "#f2f2f2",
            height: 20,
            width: "100%",
            borderRadius: [3, 3, 0, 0],
            padding: [0, 10, 0, 10]
          },
          center: {
            align: "center"
          },
          c: {
            color: "#020202"
          }
        }
      },
      data: [{
          name: "Value 1",
          value: 78
        },
        {
          name: "Value2",
          value: 22
        }
      ]

    }]

  }

  myChartUse.setOption(option);

})

Code:
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<div id="myChart" style="height: 450px; width: 600px;"></div>

<p>I tried using nested <code>rich</code> to align text to the center of a rich: <code>bg</code> section. But, the nesting doesn't work:</p>
<pre><code>formatter: function(params) {
const nome = params.name;
const valor = params.value;

return ["{bg| {center|"+nome+"}}",
"{c|Content}"].join("\n");
}
</code></pre>
<p>If I don't nest, the text appears, but not center aligned.</p>
<pre><code>formatter: function(params) {
const nome = params.name;
const valor = params.value;

return ["{bg|"+nome+"}",
"{c|Content}"].join("\n");
}
</code></pre>
<p>Complete code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function() {

const myChartUse = echarts.init(document.getElementById("myChart"));

option = {

series: [{

type: "pie",
radius: ["70%", "55%"],
padAngle: 5,
itemStyle: {
normal: {
borderRadius: 5
},
emphasis: {
color: "#40bcac"
}
},
label: {
borderWidth: 2,
width: 120,
padding: 2,
borderColor: "#020202",
formatter: function(params) {
const nome = params.name;
const valor = params.value;

return ["{bg| " + nome + "}",
"{c|Content}"
].join("\n");
},
rich: {
bg: {
backgroundColor: "#020202",
color: "#f2f2f2",
height: 20,
width: "100%",
borderRadius: [3, 3, 0, 0],
padding: [0, 10, 0, 10]
},
center: {
align: "center"
},
c: {
color: "#020202"
}
}
},
data: [{
name: "Value 1",
value: 78
},
{
name: "Value2",
value: 22
}
]

}]

}

myChartUse.setOption(option);

})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<div id="myChart" style="height: 450px; width: 600px;"></div></code></pre>
</div>
</div>
</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top