[JavaScript知识库]echarts如何在vue中灵活运用

echarts如何在vue中灵活运用
如有雷同纯属意外 个人写法
首先第一步：我们应该要引入关于echarts的包 （！这里要特殊强调一点是如果我们的项目中含有类似于地图的图表时需要另外引入）
引入echarts

import echarts from "echarts";  //这里要主要引入这一步的前提是我们已经把我们的echarts引入到我们的配置文件中

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

import "../../../node_modules/echarts/map/js/china.js";  //这个是我们要引入的关于地图的使用，是必须要引入到我们的页面的

	第二步：引入完成后我们要在指定的位置上按照需求找出我们适当匹配的图表   
	           		在这里我们是需要一个容器去承载我们的图表

<div id="echarts" class="right">
     <div class="right-title">热点指标</div>
      <div id="zb_pie_rdzb" style="width: 100%; height: 400px"></div>
</div>

对于使用id是为了全局唯一的ID相对于更方便获取元素 在下面的方法中会用到

	第三步：是关于我们拿到数据，echarts是为了更方便的展示数据当我们从接口中拿到数据以后分开赋值	  一般是使用mounted  （推荐）或  created  在其中获取到数据后 进行分别赋值  且  调用

	 mounted() {
    // this.zbZbzb_setBar();
    getData().then(res=>{
        this.worddata = res.data.last
        this.initChart();
    })
  },

第四步 ：就是关于我们的echarts的主要内容展示的地方，我个人的习惯是一个图表放在一个方法中 对应第三步中的调用，先进行数据赋值，然后再进行调用 依次展示能够更好地运行
init：就是获取到上面我们容器的操作
setoption：就是根据我们的echarts的方法进行运行展开，调用echarts内部的方法

initChart() {
      // let myChart = echarts.init(document.getElementById("zb_pie_rdzb"));
      let myChart = echarts.init(document.getElementById("zb_pie_rdzb"))
      const option = {
        backgroundColor: "#EDEDED",
        series: [
          {
            type: "wordCloud",
            gridSize: 10,
            sizeRange: [14, 60],
            rotationRange: [0, 90],
            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: "200%",
            height: "200%",
            data: this.worddata,
          },
        ],
      };
      myChart.setOption(option);
    },