一、获取ECharts
- 官网下载http://echarts.baidu.com/download.html
- Github下载https://github.com/apache/incubator-echarts
二、引入ECharts
普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<!--引入 ECharts 文件 -->
<scriptsrc="echarts.js"></script>
</head>
</html>
三、饼图即Pie构建
1 官方示例
为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!--为 ECharts 准备一个具备大小（宽高）的 DOM -->
<divid="main"style="width:600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>ECharts</title>
<!--引入 echarts.js -->
<scriptsrc="echarts.min.js"></script>
</head>
<body>
<!--为ECharts准备一个具备大小（宽高）的Dom -->
<divid="main"style="width:600px;height:400px;"></div>
<scripttype="text/javascript">
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option ={
title:{
text:'ECharts 入门示例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]
}]
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2 实现代码
$scope.setPie = function () {
// 通过接口获取数据
var ret = $scope.monitor.get_agent_group();
// console.log('setPie>>'+ JSON.stringify(ret));
var data = [
{value:0, name: '小休'},
{value:0, name: '话后'},
{value:0, name: '通话'},
{value:0, name: '空闲'}
];
if(ret != null){
var ret_data = ret.data[1];
//北京且广告
if(city == 1 && cs_server.core.session.org_T1 == 13){
//接口返回值索引0：广告，索引1:客服
ret_data = ret.data[0];
}
data[0].value = ret_data.notReadyNum;
data[1].value = ret_data.acwNum;
data[2].value = ret_data.answerNum;
data[3].value = ret_data.readyNum;
}
var option = {
title: {
text: '坐席实数据监控',
subtext: '坐席状态占比',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center',
data: ['小休', '话后','通话','空闲']
},
series : [
{
name: '坐席状态',
type: 'pie',
radius : '65%',
center: ['50%', '50%'],
selectedMode: 'single',
stillShowZeroSum:false,
label: {
normal: {
show: true,
formatter: '{b}: {c}({d}%)'
}
},
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
$scope.echartsPie.setOption(option);
};
3 生成图表
四、柱状图（Bar）折线图（Line）混用
1 实现代码
$scope.setBar = function (data_arr) {
// 指定图表的配置项和数据
var option = {
title: {
text: '技能组数据监控',
subtext: '',
left: 'center'
},
tooltip: {},
legend: {
bottom: 10,
left: 'center',
data:['排队数','进线量','接听量','接通率']
},
xAxis: {
// data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data:['新浪财经','免费邮箱','VIP邮箱','收费邮箱','130业务'],
axisLabel: {
interval:0,
rotate:40
}
},
yAxis: [
{
name:'数量',
position:'left',
},
{
name:'接通率',
position:'right',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '排队数',
type: 'bar',
label: {
normal: {
show: true,
position:'top',
formatter: '{c}'
}
},
data: [50, 20, 36, 10, 10]
},
{
name: '进线量',
type: 'bar',
label: {
normal: {
show: true,
position:'top',
formatter: '{c}'
}
},
data: [29, 18, 26, 8, 9]
},
{
name: '接听量',
type: 'bar',
label: {
normal: {
show: true,
position:'top',
formatter: '{c}'
}
},
data: [27, 15, 23, 7, 6]
} ,
{
name: '接通率',
type: 'line',
yAxisIndex: 1,
label: {
normal: {
show: true,
position:'top',
formatter: '{c}'
}
},
data: [60, 70, 60, 80, 66]
}
]
};
// 使用刚指定的配置项和数据显示图表。
$scope.echartsBar.setOption(option);
}
2 生成图表