vue页面引用echart的词云图

效果图

  

（1）安装依赖

 npm install echarts

 npm install echarts-wordcloud

 

（2）main.js加入 import echarts from 'echarts' Vue.prototype.$echarts = echarts

（3）在新建的echar.vue页面中添加以下div和样式

div:绑定词云图的数据

<div id="char2" ref="chart2"></div>   

样式：控制展示内容的大小

#char2 {
        float: left;
        padding-top: 20px;
        width: 100%;
        height: 300px;
        margin-top: 10px;
        border: 1px solid #E4E4E4;
        background: #ffffff;
        border-radius: 6px;
    }

 

（4）在script中的export default之前添加

    import echarts from "echarts";
    import "echarts-wordcloud/dist/echarts-wordcloud";
    import "echarts-wordcloud/dist/echarts-wordcloud.min"; 

<