首页 前端知识 ECharts4 升级 ECharts 5 记录

ECharts4 升级 ECharts 5 记录

2024-02-17 09:02:41 前端知识 前端哥 414 894 我要收藏

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);
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2228.html
标签
ecmascript
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!