配置
入门案例中,有以下配置,下面依次说明
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
title:标题组件
tooltip:提示框组件
官网详细解释:
https://echarts.apache.org/zh/option.html#tooltip
legend:图例
当 series 中有 name 属性时,不设置 legend 中的 data,也会显示,如:折线图
xAxis:直角坐标系 grid 中的 x 轴
官网配置:
https://echarts.apache.org/zh/option.html#xAxis
常用配置:
- data:柱状图时,通过
data指定显示数据 - type:默认值是
category,表示显示类目
yAxis:直角坐标系 grid 中的 y 轴
官网详细解释:
https://echarts.apache.org/zh/option.html#yAxis
常用配置:
- type:默认值是
value,表示显示数据
柱状图时,可设置为空,但必须存在,否则报错
让 xAxis 和 yAxis交换
xAxis: {
type:'value',
},
yAxis: {
type:'category', // 可略
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
series 系列
官网详细解释:
https://echarts.apache.org/zh/option.html#series
图表数据,指定什么类型的图表
是数组类型,其元素是对象,包含以下属性:
name:名字,有该值时,不设置
legend中的data,也会显示图例type:指定图表类型
data:数据





