Echart Chart

Code Here:


									
<div id="basic-doughnut" style="height:400px;"></div>
									
								

Init Code


									
// ------------------------------
// 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', '#4fc3f7', '#212529', '#f62d51', '#2962FF'],

            // 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}' + 'nn' + '{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'}
                    ]
                }
            ]
    };

									
								

Required Files For Echart Here


									
<!-- Javascript Here -->
<script src="../assets/libs/echarts/dist/echarts-en.min.js"></script>
									
								
All Rights Reserved by Severny. Designed and Developed by WrapPixel.