什么是Echarts？
简单来说呢它就是一个商业级数据图表，一个纯JavaScript的图标库。
可以兼容绝大部分的浏览器，可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。
Echarts能实现哪些功能？
1.强大的Echarts提供创新的拖拽重计算
2.数据视图、值域漫游等功能特性
3.大大增强了用户体验
4.并且赋予了用户对数据进行挖掘、整合的能力
5.方便丰富的可视化图表模板
6.帮助用户高效制作漂亮动态的大数据图表
尤其是对于前端攻城狮来说，那真是一个莫大的福利。代码可以直接套用、引用，改变属性，所见即所得，工作效率简直爆表，简直是前端工作必备神器哦。
Echarts有哪些优缺点呢？
首先作为一款国人开发的软件，Echarts文档全，非常方便开发和阅读文档，此外Echarts的图表丰富，可以适用各种各样的功能。
不过不足之处呢是它的移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定会有些小问题，总的来说ECharts是一款非常适合我们这种前端开发使用的框架。
Echarts支持的图表？
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图） 雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。
Echarts的使用
首先引入js:
<script type="text/javascript" src="js/echarts.js"></script>示例：柱状图
option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};效果如下：
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！