Vue 绘制echarts 词云和 Highcharts 词云

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

echarts绘制词云方法

echarts官网

  • 第一步安装echarts依赖，通过npm获取echarts,npm install echarts --save,具体操作可以看echarts官网;

  • 第二步安装echarts词云插件，npm install echarts-wordcloud --save;

  • 第三步下载好依赖之后在main.js引入文件，我这里最后将echarts写在原型prototype上

  import echarts from \'echarts\'
  require(\'echarts-wordcloud\')
  Vue.prototype.$echarts = echarts

  • 第四步绘制词云

  <template>
    <div id="echartsWordcloud" style="width:400px;height:400px;"></div>
  </template>
  <script>
  export default{
    mounted(){
      this.initEcharts()
    },
    methods:{
      initEcharts(data){
          let echartsWordcloud=this.$echarts.init(document.getElementById("echartsWordcloud"));
          let option = {
            title: {
              text: "",
              x: "center"
            },
            series: [
              {
                type: "wordCloud",
                //用来调整词之间的距离
                gridSize: 10,
                //用来调整字的大小范围
                sizeRange: [14, 26],
                rotationRange: [0, 0],
                //随机生成字体颜色
                textStyle: {
                  normal: {
                    color: function() {
                      return (
                        "rgb(" +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ")"
                      );
                    }
                  }
                },
                //位置相关设置
                left: "center",
                top: "center",
                right: null,
                bottom: null,
                width: "300%",
                height: "300%",
                //数据
                data: data
              }
            ]
          };
          echartsWordcloud.setOption(option);
          //点击事件
          echartsWordcloud.on("click",function(e){})
      }
    }
  }
  </script>

效果图

Highcharts绘制词云方法

Highcharts官网

第一步下载highcharts，可以选择文件下载方式和npm安装方式（npm install highcharts --save），官网都有教程，我选择是文件下载方式。

第二步引入highcharts文件

  <script src="./lib/highcharts/highcharts.js"></script>
  <script src="./lib/highcharts/wordcloud.js"></script>

第三步绘制词云

  <template>
    <div id="highchartsWordcloud" style="width:400px;height:400px;"></div>
  </template>
  <script>
  export default{
    mounted(){
      this.initEcharts()
    },
    methods:{
      initEcharts(data){
         Highcharts.chart("highchartsWordcloud", {
           colors: ["#6A7AFE", "#9DBBEC", "#FFDB35", "#FFFFFF"],
           tooltip: {
             enabled: false
           },
           chart: {
             plotBackgroundColor: null,
             backgroundColor: null
           },
           title: {
             text: null
             // fontWeight: "400"
           },
           credits: {
             enabled: false // 禁用版权信息
           },
           exporting:{enabled:false},
           series: [
             {
               type: "wordcloud",
               data: data,
               cursor: "pointer",
               rotation: {
                 from: 0,
                 to: 0,
                 orientations: 5
               },
              //点击事件
               events: {
                 click: function(e) {}
               }
             }
           ]
         });
      }
    }
  }
  </script>

效果图

渲染数据格式举例

data = [{name: "小区",value: "283"},{name: "留言板",value: "101"},...,{name: "业主",value: "148"}]

以上是 Vue 绘制echarts 词云和 Highcharts 词云 的全部内容， 来源链接： utcz.com/z/378916.html

回到顶部