T O P

[资源分享]     Vue 绘制echarts 词云和 Highcharts 词云

  • By - 楼主

  • 2021-03-02 12:01:57
  • 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"}]
    

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册