原生js使用ECharts

    <script type="text/javascript" src="js/echarts.min.js"></script>

 

html

 

<div id="chartContainer" style="width: 600px; height: 400px"></div>

 

js

var chartContainer = document.getElementById('chartContainer');

var chart = echarts.init(chartContainer);

        var options = {

            tooltip: {

                trigger: 'item'

            },

            legend: {

                top: '5%',

                left: 'center'

            },

            series: [

                {

                    name: 'Access From',

                    type: 'pie',

                    radius: ['40%', '70%'],

                    avoidLabelOverlap: false,

                    label: {

                        show: false,

                        position: 'center'

                    },

                    emphasis: {

                        label: {

                            show: true,

                            fontSize: 40,

                            fontWeight: 'bold'

                        }

                    },

                    labelLine: {

                        show: false

                    },

                    data: [

                        { value: 1048, name: 'Search Engine' },

                        { value: 735, name: 'Direct' },

                        { value: 580, name: 'Email' },

                        { value: 484, name: 'Union Ads' },

                        { value: 300, name: 'Video Ads' }

                    ]

                }

            ]

        };

        chart.setOption(options);