Echarts的高级使用，动画，交互api

加载动画

javascript 复制代码

    <script>
      // axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重;
      var mCharts = echarts.init(document.querySelector("div"));
      mCharts.showLoading();
      $.get("data/test_data.json", (ret) => {
        mCharts.hideLoading(); // 但服务器数据获取成功之后，隐藏加载的动画
        var axisData = [];
        for (var i = 0; i < ret.length; i++) {
          var height = ret[i].height;
          var weight = ret[i].weight;
          var newArr = [height, weight];
          axisData.push(newArr);
        }
        var option = { 
            ...
        }
        ...
         mCharts.setOption(option);
      });
    </script>

增量动画

javascript 复制代码

  <body>
    <div style="width: 600px; height: 400px; border: 1px solid red"></div>
    <button id="modify">修改数据</button>
    <button id="add">增加数据</button>
    <script>
      // init方法有两个参数，第一个参数是一个dom节点，第二个参数，代表你需要使用那一套主题
      // 默认内置了两套主题，light dark
      var mCharts = echarts.init(document.querySelector("div"), "chalk");
      var xDataArr = [
        "张三",
        "李四",
        "王五",
        "闰土",
        "小明",
        "茅台",
        "二妞",
        "大强",
      ];
      var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
      var option = {
        title: {
          text: "成绩",
          link: "http://www.itcast.cn",
          textStyle: {
            color: "blue",
          },
        },
        xAxis: {
          type: "category", // 类目轴
          data: xDataArr,
        },
        yAxis: {
          type: "value", // 数值轴
        },
        series: [
          {
            name: "语文",
            type: "bar",
            data: yDataArr,
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
      var btnModify = document.querySelector("#modify");
      btnModify.addEventListener("click", () => {
        var newYDataArr = [68, 32, 63, 77, 94, 80, 72, 86];
        // option并不一定包含全部内容，可以直接写修改后的内容
        // setOption可以设置多次
        // 新的option和旧的option
        // 新旧option的关系并不是相互覆盖的关系，是相互整和的关系
        // 我们在设置新的option的时候，只需要考虑到变化的部分就可以
        var option = {
          series: [
            {
              data: newYDataArr,
            },
          ],
        };
        mCharts.setOption(option);
      });
      var btnAdd = document.querySelector("#add");
      btnAdd.addEventListener("click", () => {
        console.log("--999");
        xDataArr.push("小明");
        yDataArr.push(90);
        var option = {
          xAxis: {
            data: xDataArr,
          },
          series: [
            {
              data: yDataArr,
            },
          ],
        };
        mCharts.setOption(option);
      });
    </script>
  </body>

动画配置

上面配置的代码实现：

javascript 复制代码

       var option = {
        animation: true, // 控制动画是否开启
        // animationduration: 300,
        animationduration: function (arg) {
          console.log(arg);
          return 2000 * arg;
        }, // 动画时长
        animationEasing: "bounceOut", // 缓动动画
        animationThreshold: 7, // 动画元素的阈值

        ...

        }

交互API

获取到地图数据之后对地图数据进行注册registerMap

echartsInstance 对象

setOption方法可以多次调用在增量动画中有所体现

代码实现：

javascript 复制代码

   <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <button id="btn1">触发行为</button>
    <button id="btn2">clear</button>
    <button id="btn3">setOption</button>
    <button id="btn4">dispose</button>
    <script>
      // 参数，dom，决定图表最终呈现的位置
      // 步骤3：初始化 echarts 实例对象
      var mCharts = echarts.init(document.querySelector("div"));
      // pieData就是需要设置给饼图的数据，数组，数组中包含一个又一个的对象，每一个对象中，需要有name和value
      var pieData = [
        {
          value: 11231,
          name: "淘宝",
          // itemStyle: {
          //   // 控制标题这一区域的样式
          //   color: "yellow",
          // },
          // label: {
          //   //控制标题的文字样式
          //   color: "blue",
          // },
          // emphasis: {
          //   itemStyle: {
          //     color: "pink",
          //   },
          //   label: {
          //     color: "black",
          //   },
          // },
        },
        {
          value: 22673,
          name: "京东",
        },
        {
          value: 6123,
          name: "唯品会",
        },
        {
          value: 8989,
          name: "1号店",
        },
        {
          value: 6700,
          name: "聚美优品",
        },
      ];
      // 准备配置项，实际上就是一个对象
      // 步骤4：准备配置项，以后在项目中除了这一块不一样之外，其他都是一样的
      var option = {
        legend: {
          data: ["淘宝", "京东", "唯品会", "1号店", "聚美优品"],
        },
        // color: ["red", "green", "blue", "purple", "skyblue"], // 全局调色盘
        series: [
          {
            type: "pie", // 饼图并不是一个坐标系，只是要设置series就可
            data: pieData,
            // color: ["pink", "yellow", "black", "orange", "red"], // 局部调色盘
            label: {
              show: true, // 显示文字
              // formatter: "hehe", // 决定文字显示的内容
              formatter: function (arg) {
                console.log(arg);
                return (
                  arg.name + "平台" + arg.value + "元\n" + arg.percent + "%"
                );
              },
            },
            // radius: 20, // 饼图的半径
            // radius: "20%", // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
            // radius: ["50%", "75%"], // 第0个元素代表的是内圆的半径，第1个元素外圆的半径
            // roseType: "radius", // 南丁格尔图，饼图的每一个区域的半径是不同的
            // selectedMode: "single", // 选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedMode: "mutiple",
            selectedOffset: 20, //选中偏移量
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
      mCharts.on("click", function (arg) {
        console.log("click", arg);
      }); // 对事件进行监听 on
      mCharts.off("click"); // 解绑click的事件

      mCharts.on("legendSelectchanged", function (arg) {
        console.log(arg, "legendSelectchanged");
      });

      $("#btn1").click(function () {
        // 模拟用户行为
        mCharts.dispatchAction({
          type: "highlight",
          seriesIndex: 0, // 图表索引
          dataIndex: 1, // 图表中哪一项高亮，数据的索引
        });
        mCharts.dispatchAction({
          type: "showTip",
          seriesIndex: 0, // 图表索引
          dataIndex: 1, // 图表中哪一项高亮，数据的索引
        });
      });
      $("#btn2").click(function () {
        // 清空图标的实例
        mCharts.clear();
      });
      $("#btn3").click(function () {
        // 重新设置option
        mCharts.setOption(option);
      });
      $("#btn4").click(function () {
        // 销毁实例，实例无法在恢复
        mCharts.dispose();
      });
    </script>
  </body>