echarts-字符云

首先要说下，从echarts2.0之后，字符云就被分离出来，需要独自安装

1.安装

1.1安装

其他安装不说了，单独说下需要安装echarts和echarts-wordcloud

npm install echarts-wordcloud -s

1.2引用

在总的js中

1
2
3

let echarts = require('echarts');
window.echarts=echarts;
require('echarts-wordcloud');

2.使用

heml部分代码就不强调了，直接写js部分

let colorlist = ["#4ad2ff ", "#36ffb1", "#23ff4f", "#3dff27", "#7aff1a", "#bdff1c", "#e2ff15", "#fdff52"];
      let myChart = echarts.init(document.getElementById("portrait"));
      let option = {
                  tooltip: {},
                  series: [{
                      type: 'wordCloud',
                      gridSize: 10,
                      //sizeRange: [22, 50],
                      //rotationRange: [0, 0],
                      //shape: 'circle',
                      textStyle: {
                          normal: {
                              color: 
                              function() {
                                  return colorlist[parseInt(10*Math.random())];
                              }
                          },
                          /*emphasis: {
                              shadowBlur: 10,
                              shadowColor: '#333'
                          }*/
                      },
                      data: [{
                          name: '企业',
                          value: 10000,
                      }, {
                          name: '公务员',
                          value: 6181
                      }, {
                          name: '2018',
                          value: 4386
                      }, {
                          name: '上下游',
                          value: 4055
                      }, {
                          name: '公司',
                          value: 2467
                      }, {
                          name: '项目',
                          value: 2244
                      }, {
                          name: '十二月份',
                          value: 1898
                      }, {
                          name: '一批',
                          value: 1484
                      }, {
                          name: '大连',
                          value: 1112
                      }, {
                          name: '北京',
                          value: 965
                      }, {
                          name: '全国',
                          value: 847
                      }, {
                          name: '采购',
                          value: 582
                      }, {
                          name: '考试',
                          value: 555
                      }, {
                          name: '示范',
                          value: 550
                      },]
                  }]
              };
              myChart.setOption(option)