图表可以很直观的把庞大的数据以一种合适的方式展现给我们，我们也能通过进行图表分析得出有价值的信息，前端人员就是为了把数据以一种很舒服、很直观的方式给别人展现出来，这其实就少不了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使用的基本过程。
什么是企业WAP网站，企业3G网站 企业WAP网站一般是指展示企业形象，介绍企业产品的WAP手机网站或者3G手机网站，让客户可以通过手机就能了解一个企业的大体情况和产品内容，从而更广泛的宣传企业，赢得更多的客户关注度！一般企业WAP网站包括：公司介绍，产品介绍，企业新闻动态，服务范围介绍，留言板，企业招聘信息等内容，如果有特殊要求，我们也会按照客户的要求定做。 企业为何要建设手机WAP网站，3
echarts使用第一步：首先需要在文件中引入JS库，可以使用百度的CDN
echarts使用第二步：之后创建一个用于显示图表的DIV
echarts使用第三步：配置加载的图表类型及路径
echarts使用第四步：配置图表数据
optionpie = {
title: {
text: '2018年08月客户总满意度比例图',subtext: '测试人员',x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a}
{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}
{a0} : {c0}
{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);
}
)相关推荐：
