echarts是什么？如何使用？echarts的介绍

来源：互联网 2024-10-08 01:35:59

图表可以很直观的把庞大的数据以一种合适的方式展现给我们，我们也能通过进行图表分析得出有价值的信息，前端人员就是为了把数据以一种很舒服、很直观的方式给别人展现出来，这其实就少不了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

<ｓｃｒｉｐｔ src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></ｓｃｒｉｐｔ>

echarts使用第二步：之后创建一个用于显示图表的DIV

<p id="pie" style="height:400px"></p><p id="bar" style="height:400px"></p>

echarts使用第三步：配置加载的图表类型及路径

<ｓｃｒｉｐｔ type="text/javascript">        // 路径配置        require.config({            paths:{                 &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;            }        });</ｓｃｒｉｐｔ>

echarts使用第四步：配置图表数据

optionpie = {　　title: {　　　　text: &#39;2018年08月客户总满意度比例图&#39;,subtext: &#39;测试人员&#39;,x: &#39;center&#39;　　},　　tooltip: {　　　　trigger: &#39;item&#39;,　　　　formatter: "{a}<br/>{b} : {c} ({d}%)"　　},　　legend: {　　　　orient: &#39;vertical&#39;,　　　　x: &#39;left&#39;,　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]　　},　　toolbox: {　　　　show: true,　　　　feature: {　　　　　　restore: true,　　　　　　saveAsImage: true　　　　}　　},　　calculable: true,　　series: [　　{　　　　name: &#39;总满意度百分比&#39;,　　　　type: &#39;pie&#39;,　　　　radius: &#39;55%&#39;,　　　　center: [&#39;50%&#39;, 225],　　　　data: [　　　　{ value: 100, name: &#39;满意&#39; },　　　　{ value: 16, name: &#39;不满意&#39;}　　]　　}　　]};option = {　　title: {　　　　text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;　　},　　tooltip: {　　　　trigger: &#39;axis&#39;,　　　　formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"　　},　　legend: {　　　　x: &#39;right&#39;,　　　　padding: [5,70,5,5],　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]　　},　　toolbox: {　　　　show: true,　　　　feature: {　　　　　　restore: true,　　　　　　saveAsImage: true　　　　}　　},　　calculable: true,　　xAxis: [　　{　　　　type: &#39;category&#39;,　　　　data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]　　}　　],　　yAxis: [　　{　　　　type: &#39;value&#39;,　　　　splitArea: { show: true }　　}　　],　　series: [　　{　　　　name: &#39;满意&#39;,　　　　type: &#39;bar&#39;,　　　　radius: &#39;55%&#39;,　　　　center: [&#39;50%&#39;, 225],　　　　data: [10, 5, 8]},　　{　　　　name: &#39;不满意&#39;,　　　　type: &#39;bar&#39;,　　　　radius: &#39;55%&#39;,　　　　center: [&#39;50%&#39;, 225],　　　　data: [2, 4, 6]}　　]};

echarts使用第五步：将数据显示在图表中

require([　　&#39;echarts&#39;,　　&#39;echarts/chart/pie&#39;,　　&#39;echarts/chart/bar&#39;],function (ec) {　　//饼状图　　var pieChart = ec.init(document.getElementById(&#39;pie&#39;));　　pieChart.setOption(optionpie);　　　　//柱状图　　var myChart = ec.init(document.getElementById(&#39;bar&#39;));　　myChart.setOption(option);})