Echarts之[字词云]

http://gallery.echartsjs.com/editor.html?c=xBJ11Hguze

 Vue转化

<template>
	<div ref="wordChart"></div>
</template>
<script>
	import echarts from 'echarts'
	import "echarts-wordcloud/src/wordCloud"
	import "echarts/lib/component/tooltip"
	import "echarts/lib/component/grid"

	export default { //字词云--http://gallery.echartsjs.com/editor.html?c=xBJ11Hguze
		name: "wordCloudChart",
		data() {
			return {
				wordList: []
			}
		},
		props: {
			chartData: String
		},
		computed: {
			option() {
				return {
    // title: {
    //     text: '热点分析',
    //     link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
    //     x: 'center',
    //     textStyle: {
    //         fontSize: 23
    //     }

    // },
    // backgroundColor: '#F7F7F7',
    tooltip: {
        show: true
    },
    // toolbox: {
    //     feature: {
    //         saveAsImage: {
    //             iconStyle: {
    //                 normal: {
    //                     color: '#FFFFFF'
    //                 }
    //             }
    //         }
    //     }
    // },
    series: [{
        name: '热点分析',
        type: 'wordCloud',
        //size: ['9%', '99%'],
        sizeRange: [6, 66],
        //textRotation: [0, 45, 90, -45],
        rotationRange: [-45, 90],
        //shape: 'circle',
        textPadding: 0,
        autoSize: {
            enable: true,
            minSize: 6
        },
        textStyle: {
            normal: {
                color: function() {
                   let colorArr = ['#423312','#605030','#9A855B','#DFC8A4'];
                                    let colorIndex = Math.ceil(Math.random() * 3);
                                    return colorArr[colorIndex];
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: this.wordList
    }]
};
		},
		methods: {
			initChart() {
				let myChart = echarts.init(this.$refs.wordChart);
				myChart.setOption(this.option);
			}
		},
		mounted() {
			let listObj = JSON.parse(this.chartData.replace('{', '{"').replace('}', '"}').replace(/, /g, '","').replace(/=/g,
				'":"'));
			for (let obj in listObj) {
				this.wordList.push({
					name: obj,
					value: parseFloat(listObj[obj])
				});
			}
			this.initChart();
		},
	}
</script>

 Echarts官方展示

option = {
    // title: {
    //     text: '热点分析',
    //     link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
    //     x: 'center',
    //     textStyle: {
    //         fontSize: 23
    //     }

    // },
    backgroundColor: '#F7F7F7',
    tooltip: {
        show: true
    },
    
    series: [{
        name: '热点分析',
        type: 'wordCloud',
        //size: ['9%', '99%'],
        sizeRange: [6, 66],
        //textRotation: [0, 45, 90, -45],
        rotationRange: [-45, 90],
        //shape: 'circle',
        textPadding: 0,
        autoSize: {
            enable: true,
            minSize: 6
        },
        textStyle: {
            normal: {
                color: function() {
                   let colorArr = ['#423312','#605030','#9A855B','#DFC8A4'];
                                    let colorIndex = Math.ceil(Math.random() * 3);
                                    return colorArr[colorIndex];
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: this.wordList
    }]
};

var JosnList = [];

JosnList.push( {
    name: "供气质量",
    value: "777"
}, {
    name: "生活用水管理",
    value: "688"
}, {
    name: "一次供水问题",
    value: "588"
}, {
    name: "交通运输",
    value: "516"
}, {
    name: "城市交通",
    value: "515"
}, {
    name: "农村基础设施",
    value: "200"
}, {
    name: "无水",
    value: "300"
}, {
    name: "供气质量",
    value: "11"
});

option.series[0].data = JosnList;