什么是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 : '平均值'}
                ]
            }
        }
    ]
};

效果如下：

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/1206