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 | 系列的图形样式,对不同类型的图表有不同的意义。 |
图表的类型
颜色样式控制
主题
echarts的主题分为默认,dark深色主题和light浅色主题
自定义主题