ECharts4 升级 ECharts 5 记录

1、版本更新

## 1、先卸载旧版本
npm uninstall echarts --save
## 2、安装 新版本
npm install echarts --save
复制

2、更改ECharts引入方式

/*
	ECharts4引入方式
*/
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/graph';
import 'echarts/lib/chart/radar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/dataZoom';
 
/*
	ECharts5 引入方式
*/
// 按需引入echarts 核心模块
import * as echarts from 'echarts/lib/echarts';
// 引入柱状图。图表后缀都为 Chart
import { BarChart,LineChart } from 'echarts/charts';
// 引入提示框，标题组件，直角坐标系，数据集，内置数据转换器组件等，组件后缀都为 Component
import { 
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  AriaComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent,
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
  BarChart, LineChart, CanvasRenderer,
  TitleComponent,TooltipComponent,GridComponent,
  LegendComponent,AriaComponent, 
  DatasetComponent,TransformComponent,ToolboxComponent,
]);复制

3、ECharts使用

// ECharts的使用可以之前一样。
const myChart = echarts.init(document.getElementById('id'));
 
// 写法一
let option={
  // 配置项...
};
myChart.setOption(option, true);
// 写法二：  myChart.setOption({ 配置项... });
  
window.addEventListener('resize', () => {
  myChart.resize();
});
 
/*
个别配置项有轻微调整，具体可参考ECharts官网：
	https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide
*/复制

4、一些修改格式提示
1）itemStyle.normal.lineStyle 已弃用，请改用 lineStyle。
[ECharts] DEPRECATED: itemStyle.normal.lineStyle is deprecated, use lineStyle instead.

// ECharts4 配置
itemStyle: {
  normal: {
    lineStyle: {
      width: 1,
    },
  },
},
/*
	itemStyle里的normal字段已被弃用
*/
// ECharts5 配置
itemStyle: {},
lineStyle: {
  width: 1,
},复制

2）axisLabel 中的 textStyle 层次结构已从 4.0 开始删除。 所有 textStyle 属性现在都直接在 axisLabel 中配置。
[ECharts] DEPRECATED: textStyle hierarchy in axisLabel has been removed since 4.0. All textStyle properties are configured in axisLabel directly now.

// ECharts5 配置
axisLabel: {
  // 坐标轴刻度标签的相关设置。
  //	margin:15,
  textStyle: {
    color: '#666',
    fontStyle: 'normal',
    fontFamily: '微软雅黑',
    fontSize: 12,
  },
  // interval:3,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，
  // rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
  formatter: params => {}
}
// ECharts5 配置
axisLabel: {
  // 坐标轴刻度标签的相关设置。
  //	margin:15,
  color: '#666',
  fontStyle: 'normal',
  fontFamily: '微软雅黑',
  fontSize: 12,
  // interval:3,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，
  // rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
  formatter: params => {}
}
 复制

3）dom上已经初始化了一个chart实例。
[ECharts] There is a chart instance already initialized on the dom.

//先获取Dom上的实例
let myChart = echarts.getInstanceByDom(document.getElementById("main") as HTMLDivElement);
//然后判断实例是否存在，如果不存在，就创建新实例
if (myChart == null) {
    myChart = echarts.init(document.getElementById("main") as HTMLDivElement);
}复制