Shulou(Shulou.com)06/01 Report--

This article will explain in detail the implementation of the cloud map of words used in vue. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

In vue, it is found that there are two ways to implement word cloud map, namely echarts and highcharts

Echarts: note that the echarts version corresponding to wordcloud has a requirement: echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4

You need to download echartsjs and wordcloud, and register globally to reference echarts

Npm install echarts@5 npm install echarts-wordcloud@2. Cloud-wrap {width: 100%; height: 100%;} .cloud-box {width: 100%; height: 100%;} import wordcloud from 'echarts-wordcloud' Export default {data () {return {words: [{id:1, content:'name'}], bgImg:'base64 format with white background' }}, mounted () {this.drawCloud (this.$refs.cloudEl, this.words) }, methods: {drawCloud (wrapEl, data) {/ / let maskImage = new Image (); / / you can generate a shaped word cloud image / / maskImage.src= this.bgImg based on the shape of the picture. Let list = this.wordCloudData.map ((item) = > ({name: item.content, value: item.id}) if (list.length = = 0) {list = [{name:' none' Value:50}]} let myChart = echarts.init (wrapEl) Let option = {tooltip: {show: true,}, / / backgroundColor:'#fff' / / canvas background color series: [{name: "hot word", type: "wordCloud", / / maskImage: maskImage, / / picture shape keepAspect: false SizeRange: [10,40], / / canvas range If the setting is too high, a few words (overflow screen) rotationRange: [0,0], / / data flip range / / shape: "circle", / / drawOutOfBound: true, / / whether words beyond the canvas are hidden drawOutOfBound: false Color: "# fff", left: "center", top: "center", right: null, bottom: null, / / width: "100%", height: "100%" GridSize: 8, textPadding: 10, autoSize: {enable: true, minSize: 6,} TextStyle: {normal: {fontFamily: 'sans-serif', fontWeight:' bold', color: "# 333" / / font color / / color: function () {/ / font color / / return 'rgb (' + [/ / Math.round (Math.random () * 160)) / / Math.round (Math.random () * 160), / / Math.round (Math.random () * 160) / /] .join (',') +')' / /},}, emphasis: {/ / focus: 'self', textStyle: {shadowBlur: 10 ShadowColor: "# 333",},}, data: list,},],} / / maskImage.onload = function () {myChart.setOption (option, true) / /};},}

Word cloud map ↑ without mask layer

Word cloud map ↑ with mask layer

Highcharts

Download the package

Npm install highcharts@7.2.1 / / Ibid. Import Highcharts from 'highcharts'export default {data () {return {words: [{id:1, content:'name'}] }}, mounted () {this.dealData () }, methods: {dealData () {let data = this.words.map ((item,index) = > ({name: item.content, value: item.id, / / weight: Math.floor (Math.random () * 3x1) / / Control bold, random number is 1: 3 If you need to follow the order returned by the interface, weight: item.id*100}) this.drawPic (data)}, drawPic (data) {Highcharts.chart ('container', {/ / highcharts logo credits: {enabled: false}) / / Export exporting: {enabled: false}, / / prompt to close tooltip: {enabled: false}, / / Color configuration colors: ['# ffffff' / / '# 00c0d7 / # 00c0d7 / 2594CEP / de4c85 / # ff7f46','#ffb310','#e25c52'] / / graphic configuration chart: {/ / spacingBottom: 15, / / spacingTop: 12 SpacingLeft: 5, spacingRight: 5, backgroundColor: "rgba (255,255,255 wordcloud 0)",}, series: [{type: "wordcloud", / / Type data: data Rotation: 90 fontFamily pinch / font does not rotate maxFontSize: 40 minus stroke / maximum font minFontSize: 14 minus font style: {fontFamily: "sans-serif" FontWeight: '500'}],}) },}}

Both echarts and highcharts can implement word cloud diagrams in vue. However, if you use echarts, you need to upgrade or downgrade the current echarts to achieve multi-color fonts, while highcharts does not. Custom shape highcharts has not been explored yet, and you can find out what you need.

On the use of words in vue cloud map implementation method to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.