[Echarts] Pie Chart 안에 이미지 넣기, 클릭시 url 이동하기

💬 구현하고자 하는 기능

1. 파이차트 가운데에 이미지 추가하기

2. 파이차트 클릭 시 url 이동하기

 

📌 파이차트 가운데 이미지 추가하기

series 속성 안의 label 을 사용하여 이미지를 추가한다.

series: [
    {
        label: {
            position: 'center',
            // 1. 변수 'a' 설정
            formatter: () => {
                return '{a|}'		
            },
            rich: {
            	// 'a' 변수에 들어갈 속성 설정
                a: {				
                    backgroundColor: {
                        image: require(`@common/DashBoard/Content/img/${this.chartId}.png`),
                    },
                    height: 35
                },
            }
        },
    }
]

 

📌 파이차트 클릭시 이벤트 추가하기

차트를 초기화한 후, click 이벤트를 추가한다.

    methods: {
        setChart(option) {
            let pieChart = echarts.init(document.getElementById(this.chartId));
            pieChart.setOption(option);

            pieChart.on('click', (params) => {
                switch(params.seriesName){
                    case 'MCP': 
                        window.parent.location.href = `${process.env.VUE_APP_ROUTE_TARGET}main/1`
                        break;
                    case 'IO Link Master': 
                        window.parent.location.href = `${process.env.VUE_APP_ROUTE_TARGET}main/2`
                        break;
                    case 'Robot': 
                        window.parent.location.href = `${process.env.VUE_APP_ROUTE_TARGET}main/3`
                        break;
                }
            });
        }
    },

 

📌 전체 코드

<template>
     <div :id="chartId" class="status-container__chart--chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
	props: { 
        chartId: { type: String, default: '' },
        stateCountList: { type: Array, default: [] },
    },
    data() {
        return {
            cnt: [
                { value: 0, name: 'Normal' },
                { value: 0, name: 'Warning' },
                { value: 0, name: 'Alert' },
            ],
            total: 0
        }
    },  
    watch: {
        // props 변경 감지
        stateCountList() {
            console.log('--props',this.stateCountList)
            this.cnt = this.stateCountList
            this.total = this.cnt[0].value + this.cnt[1].value + this.cnt[2].value   // total 값 계산
            this.setChart(this.option) 
        }
    },
	computed: {
        option() {
            return {
                tooltip: {
                    show: false,
                    trigger: 'item'
                },
                legend: {
                    show: false,
                    top: '5%',
                    left: 'center',
                },
                series: [
                    {
                        name: this.chartId,
                        type: 'pie',
                        radius: ['50%', '80%'],
                        color: ['rgb(146,208,80)','rgb(255,192,0)','rgb(255,0,0)'],
                        avoidLabelOverlap: false,
                        label: {
                            position: 'center',
                            formatter: () => {
                                return '{a|}'
                            },
                            rich: {
                                a: {
                                    backgroundColor: {
                                        image: require(`@common/DashBoard/Content/img/${this.chartId}.png`),
                                        
                                    },
                                    height: 35
                                },
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.cnt
                    }
                ]
            }
        }
    },
    methods: {
        setChart(option) {
            let pieChart = echarts.init(document.getElementById(this.chartId));
            pieChart.setOption(option);

            pieChart.on('click', (params) => {
                switch(params.seriesName){
                    case 'MCP': 
                        window.parent.location.href = `${process.env.VUE_APP_ROUTE_TARGET}main/E00000201`
                        break;
                    case 'IO Link Master': 
                        window.parent.location.href = `${process.env.VUE_APP_ROUTE_TARGET}main/E00000301`
                        break;
                    case 'Robot': 
                        window.parent.location.href = `${process.env.VUE_APP_ROUTE_TARGET}main/E00000401`
                        break;
                }
            });
        }
    },  
    mounted(){
    }
}

</script>

<style>

</style>