Code Monkey home page Code Monkey logo

Comments (1)

zhangying-dev avatar zhangying-dev commented on May 22, 2024

// js代码部分

<script> import echarts from 'echarts' require('echarts-wordcloud') require('echarts/theme/macarons') //require('echarts/theme/vintage') export default { props:{ // title: '' id: '', contData:'' }, data() { return { currentDate: new Date(), // 初始化空对象 // chartWorldcloud: null, option: '', // opinionData: [ // { // name: '租购', // value: 10000, // textStyle: { // normal: { // color: '#559DFF' // }, // emphasis: { // // color: '#f0f0f0' // } // } // } // ] opinionData: [] } }, watch: { contData: { handler: function (val, oldVal) { this.contData = val this.$nextTick(function() { this.drawGraph(this.id) }) if(this.contData){ this.opinionData = this.contData.opinionData } }, deep: true } }, mounted: function () { // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新 this.$nextTick(function() { this.drawGraph(this.id) }) if(this.contData){ this.opinionData = this.contData.opinionData } }, methods: { drawGraph(id) { let dom = document.getElementById(id) //初始化echarts 字符云图实例 let chartWorldcloud = echarts.init(dom, 'macarons') chartWorldcloud.showLoading() this.option = { tooltip: { show: true }, animation:false, series: [ { type: 'wordCloud', center: ['50%', '50%'], autoSize: { enable: true, minSize: 20 }, size: ['90%', '90%'], // 字体旋转角度 rotationRange: [0,0], textPadding: 0, gridSize: 2, sizeRange: [20, 50], shape: 'pentagon', width: 600, height: 350, drawOutOfBound: false, textStyle: { normal: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis: { shadowBlur: 10, shadowColor: '#333' } }, data: this.opinionData } ] } chartWorldcloud.setOption(this.option); chartWorldcloud.hideLoading(); console.log('1',chartWorldcloud) console.log('2',chartWorldcloud.getDataURL()) console.log('3',chartWorldcloud.getConnectedDataURL()) let url = chartWorldcloud.getDataURL(); this.$emit('worldCloudData', url); //浏览器大小改变时重置大小 window.addEventListener("resize", function () { dom.style.width = 100+'%' chartWorldcloud.resize() }) } } }

from echarts-wordcloud.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.