Vue.js入门(五)---在vue中使用echarts词云

效果

安装

在vue项目中安装echarts和词云

npm install echarts
npm install echarts-wordcloud

引入echarts和词云

main.js中加入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

创建一个vuewordcloud.vue

这个名字任意取哈

指定一个div

<template>
    <div id="mywordcloud" :style="{width: '100%', height: '300px'}" :data="worddata"></div>
</template>
<script>
  import echarts from "echarts";
  import "echarts-wordcloud/dist/echarts-wordcloud";
  import "echarts-wordcloud/dist/echarts-wordcloud.min";
    export default {
      name: "VueWordCloud",
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          worddata: [
            {
              name: "十九大精神",
              value: 15000
            },
            {
              name: "两学一做",
              value: 10081
            },{
              name: "中华民族",
              value: 9386
            },
            {
              name: "马克思主义",
              value: 7500
            },
            {
              name: "民族复兴",
              value: 7500
            },
            {
              name: "社会主义制度",
              value: 6500
            },
            {
              name: "国防白皮书",
              value: 6500
            },
            {
              name: "创新",
              value: 6000
            },
            {
              name: "民主革命",
              value: 4500
            },
            {
              name: "文化强国",
              value: 3800
            },
            {
              name: "国家主权",
              value: 3000
            },
            {
              name: "伟大复兴",
              value: 2500
            },
            {
              name: "领土完整",
              value: 2300
            },
            {
              name: "安全",
              value: 2000
            },
            {
              name: "从严治党",
              value: 1900
            },
            {
              name: "现代化经济体系",
              value: 1800
            },
            {
              name: "国防动员",
              value: 1700
            },
            {
              name: "信息化战争",
              value: 1600
            },
            {
              name: "局部战争",
              value: 1500
            },
            {
              name: "教育",
              value: 1200
            },
            {
              name: "中国梦",
              value: 1100
            },
            {
              name: "孙子兵法",
              value: 900
            },
            {
              name: "一国两制",
              value: 800
            },
            {
              name: "特色社会主义思想",
              value: 700
            },
          ]
        }
      },
      mounted(){
        this.initChart();
      },
      methods: {
        initChart() {
          this.chart = echarts.init(document.getElementById("mywordcloud"));
          console.log('lll');
          const option = {
            title: {
              text: "热爱祖国",
              x: "center"
            },
            backgroundColor: "#fff",
            // tooltip: {
            //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
            // },
            series: [
              {
                type: "wordCloud",
                //用来调整词之间的距离
                gridSize: 10,
                //用来调整字的大小范围
                // Text size range which the value in data will be mapped to.
                // Default to have minimum 12px and maximum 60px size.
                sizeRange: [14, 60],
                // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                //用来调整词的旋转方向,,[0,0]--代表着没有角度,也就是词为水平方向,需要设置角度参考注释内容
                // rotationRange: [-45, 0, 45, 90],
                // rotationRange: [ 0,90],
                rotationRange: [0, 0],
                //随机生成字体颜色
                // maskImage: maskImage,
                textStyle: {
                  normal: {
                    color: function() {
                      return (
                        "rgb(" +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ")"
                      );
                    }
                  }
                },
                //位置相关设置
                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                // Default to be put in the center and has 75% x 80% size.
                left: "center",
                top: "center",
                right: null,
                bottom: null,
                width: "200%",
                height: "200%",
                //数据
                data: this.worddata
              }
            ]
          };
          this.chart.setOption(option);
        },
      }
    }
</script>

 

  • 7
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Vue.js是一个流行的JavaScript框架,具有轻量级和高度可定制的特点。Element-ui是一个基于Vue.js的组件库,包含了许多用于Web开发的常用组件和工具,应用广泛。 下面是Vue.js和Element-ui的优点: 1. 简单易学 Vue.js和Element-ui具有简单易学的特点,这使它们成为一款流行的选择。在Vue.js,开发人员可以使用HTML和JavaScript创建组件,开发过程易于理解,而Element-ui提供了丰富的组件和模块,大大加快了开发速度,减少了开发人员的复杂度。 2. 高度可定制 Vue.js和Element-ui框架都具有高度可定制的特点。Vue.js通过数据绑定和组件化,简化了前端开发过程。Element-ui则是一组可定制的UI组件,允许开发人员自由选择和配置UI部件,以适应各种不同需求和应用场景。 3. 强大的功能 Vue.js和Element-ui都拥有强大的功能。通过Vue.js的响应式数据绑定机制和虚拟DOM,能够提高性能和用户体验。Element-ui库的组件具有各种特性,如自适应、过渡动画和元素样式控制,为开发人员开发高度优化的Web应用提供了强大的支持。 4. 生态系统 Vue.js和Element-ui的优点之一是拥有强大的生态系统和良好的社区支持。社区维护者和开发人员积极分享和更新组件库和知识库,为其他开发人员提供了丰富的资源,减少了学习成本和开发时间。 总的来说,通过使用Vue.js和Element-ui,开发人员可以快速轻松地创建复杂的Web应用程序。这些框架的优点对于开发高度优化的,易于维护的Web应用程序至关重要,而这也是Vue.js和Element-ui在Web开发社区广受欢迎的原因。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值