imooc2技术关键词下课程数

by lai chendong

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>

JavaScript

/**
 * 文字云
 * @param title
 * @param data
 * @constructor
 */
function WordCloud(title, data) {
    this.title = title;
    this.data = data;

    this.render = function () {
        var div = document.createElement("div");
        div.setAttribute('style', 'height:500px;margin-bottom:20px');
        document.body.appendChild(div);
        var myChart = echarts.init(div,'macarons');
        option = {
            title: {text: this.title, x: 'center'},
            tooltip: {
                show: true
            },
            series: [{
                name: this.title,
                type: 'wordCloud',
                size: ['100%', '100%'],
                textRotation: [0, 45, 90, -45],
                textPadding: 0,
                autoSize: {
                    enable: true,
                    minSize: 14
                },
                data: this.data
            }]
        };
        myChart.setOption(option);
    }
}

new WordCloud('技术关键词下课程数', [{'name': 'Android', 'value': 108, 'itemStyle': {'normal': {'color': 'rgb(191,19,76)'}}}, {'name': 'Java', 'value': 83, 'itemStyle': {'normal': {'color': 'rgb(88,148,132)'}}}, {'name': 'PHP', 'value': 76, 'itemStyle': {'normal': {'color': 'rgb(221,259,182)'}}}, {'name': 'JavaScript', 'value': 63, 'itemStyle': {'normal': {'color': 'rgb(0,81,73)'}}}, {'name': 'iOS', 'value': 49, 'itemStyle': {'normal': {'color': 'rgb(150,157,265)'}}}, {'name': 'HTML/CSS', 'value': 26, 'itemStyle': {'normal': {'color': 'rgb(151,239,51)'}}}, {'name': 'CSS3', 'value': 25, 'itemStyle': {'normal': {'color': 'rgb(223,27,13)'}}}, {'name': 'Linux', 'value': 24, 'itemStyle': {'normal': {'color': 'rgb(42,258,94)'}}}, {'name': 'Html5', 'value': 20, 'itemStyle': {'normal': {'color': 'rgb(78,73,39)'}}}, {'name': 'MongoDB', 'value': 18, 'itemStyle': {'normal': {'color': 'rgb(137,50,120)'}}}, {'name': 'Python', 'value': 15, 'itemStyle': {'normal': {'color': 'rgb(297,235,59)'}}}, {'name': '大数据', 'value': 13, 'itemStyle': {'normal':...