本文介绍了详解angularjs实现echart图表效果最简洁教程，分享给大家，具体如下：

ehcart是百度做的数据图表，基于原生js。接口和配置都写的很好很易读，还可以用于商用。

一echart包引用

下载解压，放入解放运动中。

下载地址：echart_jb51.rar

并在index.html中引用如图两个射流研究…文件。

app.js中引用棱角分明的艺术

二页面

超文本标记语言页面

！-饼图- div圆环图配置='donutConfig '数据=' DataList。income data /圆环图/div！-柱状图-div id=' id 0001 ' style=' width : 100%；高度： 400像素；padd : 0；保证金： 0；边框宽度：0 '/divcontroller

/** *由谢晗于2017年11月29日创建*/棱角分明。模块('研究应用程序。控制器' .控制器(' EchartCtrl '，函数($scope，$rootScope，$ionicHistory，$ location){ $ scope。title=' echart '图表；/* 官方实例链接：http://张图表。百度。com/示例。html */$作用域。go back=function(){ $ ion chistory。go back()；};//用于数据的格式化$ scope。datalist={ income data : ' ' }；//饼图$ scope。pie config={ }；//环形图$ scope。donutconfig={ }；init()；函数init(){ initChartsConfig()；initIncome()；initConfigChart()；} //饼图配置初始化函数initChartsConfig(){ $ scope。Pieconfig={中心：[120，' 50%']，半径： 90 }；$ scope。donutconfig={ radius :[0，90]}；} //饼图数据函数initIncome(){ var temp=[{ name : '测试1 '，NUM:11 }，{ NAME: '测试2 '，NUM:22 }，{ NAME: '测试3 '，NUM:33 }，{ NAME: '测试4 '，num :44 }]；if (temp) { //处理数据var temp 2=[]；angular.forEach(temp，function(item){ var t={ x : item } .名称，y:项目NUM }；温度2。push(t)；});$ scope。数据列表。收入数据=[{ name : ' echart饼图测试，数据点3360 temp 2 }]；} } //柱状图数据函数initConfigChart(){ var parkaccountChart=echart。init(文档。getelementbyid(' id 0001 ')；//div标签id var seriesLabel={ normal : { show : true，textBorderColor: '#333 '，textborderwidth : 2 } } var option={ tooltip : { trigger : ' axis '，axis指针： { type : ' shadow ' }，legend: { data: ['总数1', '总数2', '总数3']，bottom:true }，grid: { left: '1% '，right: '4% '，bottom: '8% '，top:'5% '，containLabel: true }，xAxis: { type: ' value '，name: ' '，轴标签3: { formatter 3: ' { value } ' }，yaxis 3333333333336总数1 ',键入： '巴'，标签:系列标签，数据： [165，170，330] }，{名称： '总数2 ',键入： '巴'，标签:系列标签，数据： [150，105，110] }，{名称： '总数3 ',键入： '巴'，标签: seriesLabel，data: [220，82，63]}]}；parkaccountChart.setOption(选项);} });效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。