Can you provide an online demo with the share button at
https://echarts.apache.org/examples/en/editor.html?c=pie-simple ?
Thanks
*Ovilia*
On Sat, Feb 17, 2024 at 12:53 AM William Dusenabera <
william.dusenab...@rwandabuildprogram.com> wrote:
> Dear Dev team,
>
> Hello,
>
> Considering the code below I am using echarts in vuejs, and I am having a
> problem Nested Pie Chart on outer pie chart where Categories like
> "Entertainment", "Informational" and "Social" one of them is missing(You
> only see it when mouse is over the missing one) since all data are well
> aded. For some data it works and for the data it doesn't. Since data is
> dynamic there is a huge possibilities that it may not work.
>
> Check the attached image to recognize the issue very well, you will see
> that data is well added and consider the code added to check if I may have
> done something wrong.
>
> Thank you
>
> Version used
> "echarts": "^5.4.2",
> "vue-echarts": "latest",
> "vue": "^2.6.12",
>
> Chart code
> <template>
> <div v-if="subcategoriesAnalytics.innerData.length">
> <v-chart class="chart" :option="option" autoresize />
> </div>
> </template>
>
> <script>
> import { use } from "echarts/core";
> import { CanvasRenderer } from "echarts/renderers";
> import { PieChart } from "echarts/charts";
> import {
> TitleComponent,
> TooltipComponent,
> LegendComponent,
> } from "echarts/components";
>
> use([
> CanvasRenderer,
> PieChart,
> TitleComponent,
> TooltipComponent,
> LegendComponent,
> ]);
>
> import VChart, { THEME_KEY } from "vue-echarts";
>
> import { mapState } from "vuex";
>
> export default {
> name: "UsersSubcategoriesPiechart",
> components: {
> VChart,
> },
>
> computed: {
> ...mapState(["subcategoriesAnalytics"]),
> },
>
> data() {
> return {
> option: {
> tooltip: {
> trigger: "item",
> formatter: "{a} <br/>{b}: {c} ({d}%)",
> },
> series: [
> {
> name: "Subcategories",
> type: "pie",
> selectedMode: "single",
> radius: [0, "40%"],
> hoverAnimation: false,
> itemStyle: {
> borderRadius: 4,
> borderColor: "#fff",
> borderWidth: 2,
> },
> label: {
> position: "inner",
> fontSize: 14,
> show: false,
> },
> labelLine: {
> show: false,
> },
> data: [],
> },
> {
> name: "Event type",
> type: "pie",
> radius: ["40%", "55%"],
> hoverAnimation: false,
> itemStyle: {
> borderRadius: 4,
> borderColor: "#fff",
> borderWidth: 2,
> },
> label: {
> show: true,
> },
> labelLine: {
> length: 30,
> },
> data: [],
> },
> ],
> },
> };
> },
> watch: {},
> provide: {
> [THEME_KEY]: "light",
> },
>
> created() {
> this.option = {
> tooltip: {
> trigger: "item",
> formatter: "{a} <br/>{b}: {c} ({d}%)",
> },
> legend: {
> data: ["Entertainment", "Informational", "Social"],
> },
> series: [
> {
> name: "Subcategories",
> type: "pie",
> selectedMode: "single",
> radius: [0, "55%"],
> hoverAnimation: false,
> itemStyle: {
> borderRadius: 4,
> borderColor: "#fff",
> borderWidth: 2,
> },
> label: {
> position: "inner",
> fontSize: 14,
> show: false,
> // formatter: "{d}%",
> },
> labelLine: {
> show: false,
> },
> data: this.subcategoriesAnalytics.innerData,
> },
> {
> name: "Event type",
> type: "pie",
> radius: ["55%", "70%"],
> hoverAnimation: false,
> itemStyle: {
> borderRadius: 4,
> borderColor: "#fff",
> borderWidth: 2,
> },
> label: {
> show: true,
> },
> labelLine: {
> length: 30,
> },
> data: this.subcategoriesAnalytics.outerData,
> },
> ],
> };
> },
> };
> </script>
>
> <style scoped>
> .chart {
> height: 500px;
> }
> </style>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
> For additional commands, e-mail: dev-h...@echarts.apache.org
