echarts开源可视化图标库-使用方法

ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

下载

http:// http://echarts.baidu.com/download.html

引入

<script src="./js/echarts.min.js">

绘制一个基础图表

创建一个Dom容器

<div id="container" style="width: 800px;height: 600px;"></div>

1.创建实例

var echart = echarts.init(document.getElementById("container"));

 2.设置option参数

var option = {
			title: {
				text: "vue成绩分析图"
			},
			legend: {
				data: ["成绩"]
			},
			tooltip: {},
			xAxis: {
				data: ["一", "二", "三", "四"]
			},
			yAxis: {},
			series: [{
				type: "bar",
				data: ["80", "90", "70", "100"],
				name: '成绩'
			}]
		}

3.更新option

echart.setOption(option);

这样一个简单的图表就创建成功了，看一下效果：

 echarts术语速查

title	图表的标题
legend	图例，展现了不同系列的标记、颜色和名字
tooltip	提示框
xAxis	直角坐标系 grid 中的 y 轴
yAxis	直角坐标系 grid 中的 x轴
dataZoom	区域缩放，用来放大一部分的数据，以看清细节
timeline	多个 option 切换，展现不同时间段的数据
series.itemStyle	系列的图形样式，对不同类型的图表有不同的意义。

图表的类型

 颜色样式控制