1. バージョンアップ
## 1、先卸载旧版本
npm uninstall echarts --save
## 2、安装 新版本
npm install echarts --save
2. さまざまな導入方法
バージョン4
import echarts from 'echarts';
バージョン5
import * as echarts from 'echarts';
書式設定のヒント
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 上で初期化されました。
[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);
}