Echart 版本过旧,升级为最新版本(echarts版本4升级版本5)

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上已经初始化了一个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);
}

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值