问题描述

开发环境

开发环境结果.png

生产环境

生产结果.png

很明显，正式环境的线条没有与开发环境不一致，找了一下问题，发现设置的 labelLayout 未生效。

解决方式

由于我的项目是要求按需加载的，于是有了以下文件

// demanded.js

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

// 注册必须的组件
echarts.use([
    DatasetComponent,
    MapChart,
    BarChart,
    PieChart,
    LineChart,
    CanvasRenderer,
]);
export default echarts;

饼图重要代码

// 以下是错误示范
import * as echarts from 'echarts/core';
echarts.init(el, option)

问题所在就是导入的是 import * as echarts from 'echarts/core' ，这个在使用labelLayout之前是没有发现任何问题的，这个问题出现之后改成以下方式就可以了。

// 以下是正确示范
import echarts from './demanded';
echarts.init(el, option)

但是，这个是为什么啊，不太知道，目前只发现labelLayout有这个问题。先记一下这个问题~

echarts 生产打包 labelLayout 不生效问题

问题描述

解决方式