echarts按需引入

这篇文章只对echarts v4.x 有效
官方更新到v5.x 后 可以查看官方实例 查看完整代码->按需引入

echarts 的完整包太大了，但是在项目中，其实很多都是用不上的，所以按需引入是很有必要的

• 我的解决方案是定义一个文件，里面引入项目中使用到的所有包，然后使用到的组件中进行
• echarts可选引入包参考链接

import echarts from "echarts/lib/echarts";

import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/grid";
// import 'echarts/theme/macarons' // echarts theme
import installTheme from "./echarts-theme";
installTheme(echarts);

export default echarts;

• 这里的主题使用了自定义的主题(基本上是删除了没用上图形的颜色样式)，因为我发现使用 echarts 自带的主题会按需引入失败(因为定义了所有的图形样式形状)
• 主题参考链接

export default function installTheme(echarts) {
  var colorPalette = [
    "#2ec7c9",
    "#b6a2de",
    "#5ab1ef",
    "#ffb980",
    "#d87a80",
    "#8d98b3",
    "#e5cf0d",
    "#97b552",
    "#95706d",
    "#dc69aa",
    "#07a2a4",
    "#9a7fd1",
    "#588dd5",
    "#f5994e",
    "#c05050",
    "#59678c",
    "#c9ab00",
    "#7eb00a",
    "#6f5553",
    "#c14089",
  ];

  const theme = {
    color: colorPalette,

    title: {
      textStyle: {
        fontWeight: "normal",
        color: "#008acd",
      },
    },

    tooltip: {
      backgroundColor: "rgba(50,50,50,0.5)",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "#008acd",
        },
        crossStyle: {
          color: "#008acd",
        },
        shadowStyle: {
          color: "rgba(200,200,200,0.2)",
        },
      },
    },

    grid: {
      borderColor: "#eee",
    },

    line: {
      smooth: true,
      symbol: "emptyCircle",
      symbolSize: 3,
    },
  };

  echarts.registerTheme("macarons", theme);
}