echarts图表库插件的使用
常见图表库: echarts
, antv
(蚂蚁金服做的). datav
(阿里体系的)
国际上: d3
ds.js
1. 什么是echarts图表
ECharts是一款基于javaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。2021年1月26日晚, Apache基金会官方宣布EChaiis项目正式毕业。
2. 简单使用方法
详情可以看官方文档; 这里我记录下简单的
echarts官网
- 安装
yarn add echarts
- 引入
import * as echarts from 'echarts';
- 创建图标容器, html标签;
<div id="echars1"></div>
- 初始化图表库
var myChart = echarts.init(document.getElementById(‘#echars1’));
- 配置图表
myChart.setOption({
// 标题
title: {
text: '近7天运动时长',
textStyle: {
fontSize: '14px',
fontWeight: '400'
}
},
// 布局grid
grid: {
left: 40
},
// x轴; 类目轴
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// y轴; 数值轴
yAxis: {
type: 'value'
},
// 数据序列
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
});
-
查看官方文档, 文档>配置项手册, 根据自己的需要查看文档, 配置对应属性样式
-
官方有丰富的实例供选择, 点击进入实例可以获取代码
3. 具体的使用方法_
(在更新...)