echarts是什么_echart.js学习和使用

访客4年前黑客工具409

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

效果如下:




思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

中国美国日本印度哪国黑客厉害(印度最大的黑客组织)

中国美国日本印度哪国黑客厉害(印度最大的黑客组织)

本文导读目录: 1、网络黑客哪个国家厉害 2、世界上黑客最厉害的国家 3、哪个国家的黑客最厉害? 4、世界黑客排名是怎样的? 5、世界上水平最高的电脑黑客在哪个国家?我们国家的厉害吗?...

月嫂证怎么考去哪里考(靠个月嫂证多少钱)

月嫂证怎么考去哪里考(靠个月嫂证多少钱)

很多想学习月嫂的姐妹会因为免费或低价的月嫂培训而报名,这样的月嫂培训不仅质量没有保证,大部分都是不颁发母婴护理师证书的,也有小部分颁发初级母婴护理师证书。但初级的证书不仅无法满足一线城市的需要,连...

2600万分LiveJournal凭据线上泄露,在暗在网上售卖

2600万分LiveJournal凭据线上泄露,在暗在网上售卖

ZDNet掌握到,当今在暗网和黑客社区论坛,有多位黑客已经出售和私下交易LiveJournal的数据库看来,该企业好像在2014年就遭到了一次网络安全问题进攻。 针对某些人而言,这可能是个老新闻报道...

黑客技术入门:黑客分那几种类型?不同黑客的特征是什么?

黑客技术入门:黑客分那几种类型?不同黑客的特征是什么?

黑客信息网:很多人不知道为什么黑客分这么多类型,下面黑客接单平台给大家普及一下   黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,...

怎么关闭系统还原(教您win7怎么关闭系统还原)

怎么关闭系统还原(教您win7怎么关闭系统还原)

电脑使用久后都会出现一些问题,有些可以自己解决,无法解决的最直接的方法就是重装系统,此前小编也给大家介绍过使用云骑士装机大师重装系统的方法。其实在我们使用的Windows系统中就自带有系统还原功能,在...

清明节的由来及传说简介(清明节的起源介绍)

一、清明节的简介 清明是我国的二十四节气之一。由于二十四节气比较客观地反映了一年四季气温、降雨、物候等方面的变化,所以古代劳动人民用它安排农事活动。《淮南子?天文训》云:“春分后十五日,斗指乙,则清明...