图表可以很直观的把庞大的数据以一种合适的方式展现给我们,我们也能通过进行图表分析得出有价值的信息,前端人员就是为了把数据以一种很舒服、很直观的方式给别人展现出来,这其实就少不了ECharts,所以说,echarts到底是什么呢?如何使用?本篇文章就来给大家介绍一下echarts的内容。
首先我们来看一下echarts是什么?
从官网的解释我们可以知道echarts是商业级数据图表,是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
简而言之,echarts就是一个帮助数据可视化的库。
看完了echarts是什么的解释后,我们再来看看echarts如何使用?
上面我们说到echarts是商业级数据图表。那么这些图表都有哪些我们来看一下
折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)
雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。
在我们知道了图表有哪些之后,我们就需要知道如何使用了。
首先我们需要下载插件:https://github.com/ecomfe/echarts/archive/1.4.1.zip
然后我们来用一个例子来说明echarts使用的基本过程。
echarts使用第一步:首先需要在文件中引入JS库,可以使用百度的CDN
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
echarts使用第二步:之后创建一个用于显示图表的DIV
<div id="pie" style="height:400px"></div> <div id="bar" style="height:400px"></div>
echarts使用第三步:配置加载的图表类型及路径
<script type="text/javascript"> // 路径配置 require.config({ paths:{ 'echarts' : 'http://echarts.baidu.com/build/echarts', 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts', 'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts' } }); </script>
echarts使用第四步:配置图表数据
optionpie = { title: { text: '2018年08月客户总满意度比例图',subtext: '测试人员',x: 'center' }, tooltip: { trigger: 'item', formatter: "{a}<br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data: ['满意', '不满意'] }, toolbox: { show: true, feature: { restore: true, saveAsImage: true } }, calculable: true, series: [ { name: '总满意度百分比', type: 'pie', radius: '55%', center: ['50%', 225], data: [ { value: 100, name: '满意' }, { value: 16, name: '不满意'} ] } ] }; option = { title: { text: '2018年08月客户满意度分布图',subtext: '测试人员',x: 'left' }, tooltip: { trigger: 'axis', formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}" }, legend: { x: 'right', padding: [5,70,5,5], data: ['满意', '不满意'] }, toolbox: { show: true, feature: { restore: true, saveAsImage: true } }, calculable: true, xAxis: [ { type: 'category', data: ['客服人员满意度', '维修人员满意度', '售后人员满意度'] } ], yAxis: [ { type: 'value', splitArea: { show: true } } ], series: [ { name: '满意', type: 'bar', radius: '55%', center: ['50%', 225], data: [10, 5, 8]}, { name: '不满意', type: 'bar', radius: '55%', center: ['50%', 225], data: [2, 4, 6]} ] };
echarts使用第五步:将数据显示在图表中
require( [ 'echarts', 'echarts/chart/pie', 'echarts/chart/bar' ], function (ec) { //饼状图 var pieChart = ec.init(document.getElementById('pie')); pieChart.setOption(optionpie); //柱状图 var myChart = ec.init(document.getElementById('bar')); myChart.setOption(option); } )
相关推荐:
以上就是echarts是什么?如何使用?echarts的介绍的详细内容,更多请关注Work网其它相关文章!