echarts按需加载

echart使用时建议按需引入，通过webpack-bundle-analyzer对打包文件体积和依赖关系可以看出如果全部引入echars，最后echarts有500多k的大小，官网提示是400多k。按需引入后只占100k左右。

1.安装
yarn add echarts

2.页面按需引入（圆形图）

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入圆形图
import { PieChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

3.在项目中构建echarts
// 构建前必须给容器加上宽高，没有宽高的容器是无法绘制出echars的
// 进度类的图形可以用echarts的原型图来改造，设置series.data为两组数据，用color设置两条数据的背景颜色
// 通过series.radius来设置圆形图边框的大小，radius两条百分比数据，分别代表第一个边框距离中心点的距离和第二个边框距离中心点的距离
// 通过ref锚点来获取dom元素

// templete
<div id="pie" ref="pie_wrp" style="height: 200px; width: 200px"></div>
// script
var myChart = echarts.init(this.$refs.pie_wrp);
    myChart.setOption({
      color: ["rgb(102,208,113)", "rgb(213,223,223)"],
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["95%", "100%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "" },
            { value: 735, name: "" },
          ],
        },
      ],
    });