通过柱状图实例,一文让你学会Echarts的基础使用!!!
先看效果:
获取Echarts
文件目录
引入Echarts
通过标签方式直接引入构建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>
绘制图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 1710px; height: 670px"></div>
</body>
然后就可以通过echarts.init
方法初始化一个 echarts 实例并通过setOption
方法生成一个柱状图,下面是代码步骤拆分。
title
标题组件,包含主标题和副标题
title: {
text: '新增课本', // 主标题文本
show: true, // 是否显示标题组件
textStyle: {
color: '#6699ff',
fontSize: 36,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
},
top: '42',
left: '40'
}
未加top/left时:
加了top/left时:
title属性详情请看:https://echarts.apache.org/zh/option.html#title
series
系列列表。每个系列通过 type
决定自己的图表类型
series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
{
name: '新增数量', // 系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列
type: 'bar', // 柱状图(或称条形图)是一种通过柱形的高度(横向的情况下则是宽度)来表现数据大小的一种常用图表类型
data: values, // (数组) 单个数据项的数值
xAxisIndex: 0, // 使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用
yAxisIndex: 0, // 使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
barWidth: '30px', // 柱条的宽度,不设时自适应
itemStyle: {
// 自定义特殊 itemStyle,仅对该数据项有效--数据项样式
color: '#6482ff',
barBorderRadius:[10,10,0,0] // 数据项图形的边框圆角样式
},
label: {
// 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
show: false // 是否显示标签,在数据项上
}
}
]
series属性具体详情请看:https://echarts.apache.org/zh/option.html#series
legend
图例组件,图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示
滚动图例(垂直)
滚动图例(水平)