新手也能3分钟利用echarts绘制一个好看的图表
一、引入eacharts
<script src="echarts.js"></script>
二、现在页面上设置一个给定宽高的盒子作为容器
<div id="main" style="width: 600px;height:400px;"></div>
三、通过 echarts.init0 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表
- init()创建实例
- option设置需要的数据、
- title标题
- legend图例
- xAxis x轴，填写具体不同的类别
- yAxis y轴，必须有但不填写数据，（会根据数据自动生成）
- series 数据数组：name 与图例对应，type：条形图bar，折线图line……data：与y轴
- setOption(option)：创建图表
-
复制下面这段代码，
- 修改title的text
- xAxis的data改为对应x轴的数据
- legend的data和serise的name对应图例名称
- serise的data改为对应y轴的数据
- 简单四步轻松搞定！
<body>
<div id="main" style="width: 600px;height:400px;"> </div>
<script src="echarts.js"></script>
<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>
填写多个数据对象，即可实现下图效果点击图例还可以将部分数据收起
Document.png
部分echarts常用配置项详解
title 标题
- 是一个对象
- text属性：填写具体的文本内容
- x、y偏移属性：可以些‘center’、‘left’这样的值，也可以些具体的偏移量
- textStyle对象：可以设置文本的样式，写法与css类似
legend 图例
- 是一个对象
- left偏移属性：可以些具体偏移量或者‘left’，‘center’大致对齐方式
- itemGap属性：多个图例之间的间距
- itemWidth属性：图例宽度
- itemHeight属性：图例高度
- itemStyle对象：图例样式，写法类似css样式
series 数据相关
- 是个数组，可以填写多个对象
- name属性，与图例对应的类型
- type属性，line折线图、bar柱状图、pie饼图、scatter散点图、tree树形……
grid 坐标系网格
- 即整张图标
- left、right、top、bottom可以设置边距
tooltip 提示信息
- tigger触发：数据图形（主要用于散点图）使用’item‘；柱状图，折线图、坐标轴使用’axis‘；none都不触发
- axisPointer：快捷配置坐标轴指示器
- formatter：格式化提示文本
- 字符串模板：变量有
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
- 字符串模板：变量有
toolbox 工具栏
- show显示：布尔值。是否显示工具栏
