ehcart是百度做的数据图表，基于原生js。接口和配置都写的很好很易读，还可以用于商用。本文主要介绍了详解angularjs实现echart图表效果最简洁教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
一 echart包引用
下载解压，放入lib中。
下载地址：echart_jb51.rar
并在index.html中引用如图两个js文件。
app.js中引用angular-echarts
二 页面
html页面
<!--饼图-->
<p>
<donut-chart config="donutconfig" data="datalist.incomedata">
</donut-chart>
</p>
<!--柱状图-->
<p id="id0001" style="width: 100%;height: 400px; padding: 0;margin: 0; border-width: 0; ">
</p>
controller
/**
* created by xiehan on 2017/11/29.
*/
angular.module('studyapp.controllers')
.controller('echartctrl', function ($scope, $rootscope, $ionichistory,$location) {
$scope.title = 'echart图表';
/*
官方实例链接：http://echarts.baidu.com/examples.html
*/
$scope.goback = function () {
$ionichistory.goback();
};
//用于数据的格式化
$scope.datalist = {
incomedata:""
};
// 饼图
$scope.pieconfig = {};
// 环形图
$scope.donutconfig = {};
init();
function init() {
initchartsconfig();
initincome();
initconfigchart();
}
//饼图配置初始化
function initchartsconfig() {
$scope.pieconfig = {
center: [120, '50%'],
radius: 90
};
$scope.donutconfig = {
radius: [0, 90]
};
}
//饼图数据
function initincome(){
var temp = [
{
name:"测试1",
num:11
},
{
name:"测试2",
num:22
},
{
name:"测试3",
num:33
},
{
name:"测试4",
num:44
}
];
if (temp) {
// 处理数据
var temp2 = [];
angular.foreach(temp, function (item) {
var t = {x: item.name, y: item.num};
temp2.push(t);
});
$scope.datalist.incomedata = [{
name: 'echart饼图测试',
datapoints: temp2
}];
}
}
//柱状图数据
function initconfigchart() {
var parkaccountchart = echarts.init(document.getelementbyid('id0001'));//p 标签id
var serieslabel = {
normal: {
show: true,
textbordercolor: '#333',
textborderwidth: 2
}
};
var option = {
tooltip: {
trigger: 'axis',
axispointer: {
type: 'shadow'
}
},
legend: {
data: ['总数1', '总数2', '总数3'],
bottom:true
},
grid: {
left: '1%',
right: '4%',
bottom: '8%',
top:'5%',
containlabel: true
},
xaxis: {
type: 'value',
name: '',
axislabel: {
formatter: '{value}'
}
},
yaxis: {
type: 'category',
inverse: true,
data: ['y1', 'y2', 'y3']
},
series: [
{
name: '总数1',
type: 'bar',
label: serieslabel,
data: [165, 170, 330]
},
{
name: '总数2',
type: 'bar',
label: serieslabel,
data: [150, 105, 110]
},
{
name: '总数3',
type: 'bar',
label: serieslabel,
data: [220, 82, 63]
}
]
};
parkaccountchart.setoption(option);
}
});
效果图
相关推荐：
解析angularjs数组的传参方式
angularjs如何处理多个异步请求的方法总结
angularjs入门常见知识总结
以上就是angularjs实现echart图表效果简单实现教程的详细内容。