ECharts Sample - 2 independant charts

by Mike Rawling

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.0/echarts-all.js"></script>
<div id="main" style="height: 500px; border: 1px solid rgb(204, 204, 204); padding: 10px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);"></div>

JavaScript

// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
        // Step:3 echarts和zrender被echarts-plain.js写入为全局接口
        
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title : {
                text: 'PPC Categories',
                subtext: 'multi-level doughnut chart',
                x:'right',
                y:'bottom'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['ACCOUNT SETTINGS','ACCOUNT STRUCTURE','AD COPY and EXTENSIONS','KEYWORD COVERAGE','BIDDING','BASIC HOUSEKEEPING','AUDIENCE TARGETING']
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            /* xAxis : [
                {
                    type : 'category',
                    data : ['1','2','3','4','5','6','7','8','9','10','11','12']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true}
                }
            ],
            */
            series : (function (){
                var series = [];
                for (var i = 0; i < 30; i++) {
                    series.push({
                        name:'PPC audit score',
                        type:'pie',
                        itemStyle : {normal : {
                            label : {show : i > 28},
                            labelLine : {show : i > 28, length:20}
                        }},
                        radius : [i * 4 + 40, i * 4...