Echarts在线免费图表

 
            option = {
    title: {
        text: '浏览器占比变化',
        subtext: '纯属虚构',
        x: 'right',
        y: 'bottom'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['Chrome', 'Firefox', 'Safari', 'IE9+', 'IE8-']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: false,
    series: (function() {
        var series = [];
        for (var i = 0; i < 30; i++) {
            series.push({
                name: '浏览器（数据纯属虚构）',
                type: 'pie',
                itemStyle: {
                    normal: {
                        label: {
                            show: i > 28
                        },
                        labelLine: {
                            show: i > 28,
                            length: 20
                        }
                    }
                },
                silent: true,
                radius: [i * 4 + 40, i * 4 + 43],
                data: [{
                    value: i * 128 + 80,
                    name: 'Chrome'
                }, {
                    value: i * 64 + 160,
                    name: 'Firefox'
                }, {
                    value: i * 32 + 320,
                    name: 'Safari'
                }, {
                    value: i * 16 + 640,
                    name: 'IE9+'
                }, {
                    value: i * 8 + 1280,
                    name: 'IE8-'
                }]
            })
        }
        series[0].markPoint = {
            symbol: 'emptyCircle',
            symbolSize: series[0].radius[0],
            effect: {
                show: true,
                scaleSize: 12,
                color: 'rgba(250,225,50,0.8)',
                shadowBlur: 10,
                period: 30
            },
            data: [{
                x: '50%',
                y: '50%'
            }]
        };
        return series;
    })()
};
setTimeout(function() {
    var _ZR = myChart.getZrender();
    var TextShape = require('zrender/shape/Text');
    // 补充千层饼
    _ZR.addShape(new TextShape({
        style: {
            x: _ZR.getWidth() / 2,
            y: _ZR.getHeight() / 2,
            color: '#666',
            text: '恶梦的过去',
            textAlign: 'center'
        }
    }));
    _ZR.addShape(new TextShape({
        style: {
            x: _ZR.getWidth() / 2 + 200,
            y: _ZR.getHeight() / 2,
            brushType: 'fill',
            color: 'orange',
            text: '美好的未来',
            textAlign: 'left',
            textFont: 'normal 20px 微软雅黑'
        }
    }));
    _ZR.refresh();
}, 2000);



myChart.on('click', function(params) {
    // 控制台打印数据的名称
    alert("名称：" + params.name + '    ----值：' + params.value);
});