ECharts开源图表使用方法简单介绍

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

ECharts图表是基于Canvas，纯Javascript图表库，基于BSD开源协议，官网地址：http://echarts.baidu.com/index.html

需要先下载插件：https://github.com/ecomfe/echarts/archive/1.4.1.zip

1. 首先需要在文件中引入JS库，可以使用百度的CDN

2. 之后创建一个用于显示图表的DIV

3. 配置加载的图表类型及路径

4. 配置图表数据

optionpie = {
title: {
text: '2014年04月客户总满意度比例图',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: '2014年04月客户满意度分布图',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]}
]
};

5. 将数据显示在图表中

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);
}
)

通过以上即可完成图表的配置，这里附上完整的代码

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Demo</title>

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>

<div id="pie" style="height:400px"></div> <div id="bar" style="height:400px"></div>
<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'
}
}); optionpie = {
title: {
text: '2014年04月客户总满意度比例图',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: '2014年04月客户满意度分布图',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]}
]
};
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);
}
)
</script>
</body>