angularjs+echarts绘制图表怎么做

发布网友发布时间：2022-04-30 05:21

共1个回答

热心网友时间：2022-04-22 13:08

app.directive("bar", function() {
return {
restrict: 'AE',
scope: {
'id': '@',
'height': '@',
'legend': '=',
'item': '=',
'data': '='
},
replace: true,
template: '<div style="height:{[{height}]}px;", id="{[{id}]}"></div>',
link: function($scope, element, attrs, controller) {
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 问题在这里：有id但拿不到对应的div。返回的div为null
var div = document.getElementById($scope.id)
// 直接用传进来的element也不对。
var chart = echarts.init(element)
chart.setOption(option)
}
}
})
这是对应的HTML

1
2
3
4
5
6
7
8
9
10

<div class="row">
<div class="col-md-4" ng-repeat="div in universes">
<div class="panel panel-default" >
<div class="panel-heading">{[{div.name}]}</div>
<div class="panel-body">
<div bar height="250" id="{[{'univ-'+div.id}]}"></div>
</div>
</div>
</div>
</div>