ECharts 基础图表
ECharts 基本柱状图
-
柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。
-
设置柱状图的方式,是将
series 的 type 设为 'bar'
。option = { xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: {}, 实现多系列的柱状图,只需要在 series 多添加一项就可以了 series: [ { type: 'bar', data: [23, 24, 18, 25, 27, 28, 25] }, { type: 'bar', data: [23, 24, 18, 25, 27, 28, 25] } ] };
-
柱条的样式可以通过
series.itemStyle
设置:- 柱条的颜色(
color
) - 柱条的描边颜色(
borderColor
)、宽度(borderWidth)、样式(borderType);
- 柱条圆角的半径
(barBorderRadius);
- 柱条透明度
(opacity);
- 阴影
(shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY)。
option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [ 10, 22, 28, { value: 43, // 设置单个柱子的样式 itemStyle: { color: '#91cc75', shadowColor: '#91cc75', borderType: 'dashed', opacity: 0.5 } }, 49 ], itemStyle: { barBorderRadius: 5, borderWidth: 1, borderType: 'solid', borderColor: '#73c0de', shadowColor: '#5470c6', shadowBlur: 3 } } ] };
- 柱条的颜色(
-
柱条宽度可以通过
barWidth
设置,将 barWidth 设为 ‘20%’,表示每个柱条的宽度就是类目宽度的 20%。由于每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [10, 22, 28, 43, 49], barWidth: '20%' } ] };
-
可以设置
barMaxWidth
限制柱条的最大宽度, -
可以设置
barMinHeight
限制柱条的最小高度,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。 -
柱条间距分为两种:
- 一种是不同系列在同一类目下的距离
barWidth
, - 一种是类目与类目的距离
barCategoryGap
option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { type: 'bar', data: [23, 24, 18, 25, 18], barGap: '20%', barCategoryGap: '40%' }, { type: 'bar', data: [12, 14, 9, 9, 11] } ] };
- 一种是不同系列在同一类目下的距离
-
为柱条添加背景色;用
showBackground
开启,并且可以通过backgroundStyle
配置。option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } } ] };
ECharts 基础折线图
-
折线图是一种通过折线来表现数据大小的一种常用图表类
-
在
series
中,我们将系列类型设为line
·设置折线图,且通过 data 指定了折线图三个点的取值option = { xAxis: { type: 'category', data: ['A', 'B', 'C'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150], type: 'line' } ] };
-
折线图中折线的样式可以通过
lineStyle
设置,可以为其指定颜色、线宽、折线类型、阴影、不透明度等等option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [10, 22, 28, 23, 19], type: 'line', // 折线图分为很多类型 lineStyle: { normal: { color: 'green', // 设置颜色 width: 4, // 设置宽度 type: 'dashed' // 设置类型 } } } ] };
-
数据点的样式可以通过
series.itemStyle
填充颜色(color)、描边颜色(borderColor)、描边``宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等
-
在数据点处显示数值:数据点的标签通过
series.label
属性指定。如果将label
下的show 指定为true
,则表示该数值默认时就显示;如果为false
,而series.emphasis.label.show 为 true
,则表示只有在鼠标移动到该数据时,才显示数值option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [10, 22, 28, 23, 19], type: 'line', label: { show: true, position: 'bottom', textStyle: { fontSize: 20 } } } ] };
-
在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望–空数据不应被其左右的数据连接。
option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [0, 22, '-', 23, 19], type: 'line' } ] };
Echarts 基础饼图
-
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例
-
饼图通过设置 :
type: 'pie',
-
饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中
option = { series: [ { type: 'pie', data: [ { value: 335, name: '直接访问' }, { value: 234, name: '联盟广告' }, { value: 1548, name: '搜索引擎' } ], radius: '50%' } ] };
-
这里是
value
不需要是百分比数据,ECharts 会根据所有数据的value
,按比例分配它们在饼图中对应的弧度。 -
饼图的半径可以通过
series.radius
设置,可以是60%
’ 这样相对的百分比字符串,或是200
这样的绝对像素数值 -
如果数据和为
0
,不显示饼图可以将series.stillShowZeroSum 设为 false。
option = { series: [ { type: 'pie', stillShowZeroSum: false, label: { show: false }, data: [ { value: 0, name: '直接访问' }, { value: 0, name: '联盟广告' }, { value: 0, name: '搜索引擎' } ] } ] };
异步数据的加载与动态更新
-
Charts 中实现异步数据的更新,在图表初始化后不管任何时候只要通过
jQuery
等工具异步获取数据后通过setOption
填入数据和配置项就行。var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [] } ] }); // 异步加载数据 $.get('data.json').done(function(data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [ { // 根据名字对应到相应的系列 name: '销量', data: data.data } ] }); });
loading 动画
-
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading(); $.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...); });