绘制简单图表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
常用API及配置:
title:标题组件,包含主标题和副标题
- title中常用属性:
- text: 主标题文本,支持使用
\n
换行 - subtext:副标题文本
- textStyle常用属性:
- color:主标题文字颜色
- fontStyle、fontWeight、fontFamily、fontSize:文字设置
- lineHeight:行高
- subtextStyle属性: rich:在rich中,可以自定义富文本样式。利用富文本样式,可以在标签中做出丰富效果。
- text: 主标题文本,支持使用
label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
- title中常用属性:
- zlevel:所有图形的zlevel值。用于Canvas分层,不同的zlevel值得图形会放在不同的Canvas中,是一种常见的优化手段。
- left、top、right、bottom:grid组件离容器边边的距离
- backgroundColor:标题背景色,默认透明。
legend:图形组件。展示不同系列的标记、颜色、名字。
- legend中常用属性:
- type:
plain
普通图例。scroll
可滚动翻页的图例。 - orient:图例列表的布局朝向。
horizontal
/vertical
- align:图例标记和文本的对齐。
auto
/left
/right
- itemGap、itemWidth、itemHeight:图例标记的间隔,图形宽度,图形高度。
- formatter:用来格式化图例文本,支持字符串模板和回调函数两种形式。
- textStyle:图例的公用文本样式。
- tooltip:提示框组件。
- data:name:图例项的名称。icon:
circle
/rect
/roundRect
/triangle
/diamond
/pin
/arrow
/none
- type:
grid直角坐标系内绘图网络,单个grid内最多可以放置上下两个X轴,左右两个Y轴。可以在网络上绘制折线图、柱状图、散点图。
xAxis:直角坐标系grid中的x轴。
- xAxis中常用属性:
- gridIndex:x轴所在的grid的索引。
- position:x轴的位置。
top
/bottom
- offset:x轴相对于默认位置的偏移,在相同的position上有多个x轴的时候使用。
- type:坐标轴类型。
value
数值轴,适用于连续数据。category
类目轴,适用于离散的类目数据。time
时间轴,适用于连续的时序数据。log
对数轴,适用于对数数据。 - nameRotate:坐标轴名字旋转,角度值。
- min、max:坐标轴刻度最小、最大值。
yAxis:直角坐标系grid的y轴。与xAxios相似。
geo:地理坐标系组件。用于地图绘制。支持在地理坐标系上绘制散点图,线集。
dataset:ECharts4支持数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。
- dataset中常用属性:
- id:组件ID。
- source:原始数据。
- dimensions:定义
series.data
或者dataset.source
的每个维度的信息。
series:系列列表。每个系列通过
type
决定自己的图表类型。
- series中常用属性:
- type:
line
折线图bar
柱状/条形图pie
饼图scatter
散点图radar
雷达图map
地图funnel
漏斗图 - name:系列名称。
- symbol:标记的图形。
circle
/rect
/roundRect
/triangle
/diamond
/pin
/arrow
/none
。设置图片:image://url
。 - label:图形上的文本标签,可用于说明图形的一些数据信息。
- normal:标签正常模式下。
show
/position
- emphasis:图形的高亮样式。
show
/textStyle
- formatter:标签内容格式器,支持字符串模板和回调函数两种形式。
{a}
系列名{b}
数据名{c}
数据值{@xxx}
数据中名为xxx的维度的值{@[n]}
数据中维度n的值
- normal:标签正常模式下。
- type: