Echarts仪表盘镂空且导入外来图片

原创 前端工程师_钱成 随笔 Echarts 212阅读 2018-07-03 21:03:51 举报

镂空效果实现思路:三图叠加。(1)仪表盘,画出仪表盘;(2)饼图一,从仪表盘左界开始,顺时针用绿色填充仪表盘整个显示区,用透明填充仪表盘下方空白;(3)饼图二,从仪表盘右界开始,逆时针用白色填充仪表盘部分显示区(这个计算过程较为复杂),用透明填充整个圆环的其它部分;


附:普通仪表盘

评论 ( 1 )
最新评论
前端工程师_钱成 2018-08-23 17:13:47 1F

<dir-pagination config="pagin_init" pagination-config="pagin_config"></dir-pagination>
1、radio.js
this.page = function (list, total) { // 翻页点击后要进行的操作
var that = this;
if (that.all) {
that.list = true;
if (!angular.isUndefined(total)) {
that.total_selected = total - that.removeAllId.length;
that.cal();
}
angular.forEach(list, function (item) {
var flag = that.operator.check(item[that.id_key], that.removeAllId);
if (flag.has === '1') {
item.custom_checked = false;
that.list = false;
} else {
item.custom_checked = true;
}
})
} else {
that.list = true;
angular.forEach(list, function (item) {
var flag = that.operator.check(item[that.id_key], that.allId);
if (flag.has === '1') {
item.custom_checked = true;
} else {
item.custom_checked = false;
that.list = false;
}
});
if (list.length < 1) that.list = false;
};
}

2、radio-pagin-init.js
(function () {
angular
.module('common-serve')
.service('radioPaginInit', function (radio_m, pagin_config_init) {
this.init = function (config, scope, type) {
var type = type || '';
scope[('check_state' + type)] = new radio_m.init(config.radio);
scope[('pagin_init' + type)] = new pagin_config_init.init(config.pagin);//获取父作用域的url
scope[('pagin_init' + type)]['callback'] = function (res) {
config.cb(res, scope);//获取父作用域的数据
scope[('check_state' + type)]'page';
//相对于4、dir-pagination.js。获取父作用域的方法,传入父作用域的数据、本作用域的数据
}
}
});
})(angular);

3、collect-data.js
radioPaginInit.init({
radio: {
id_key: 'pcapId'
},
pagin: {
root: 'datclct',
url: '/datclct/getinfo',
pagin_key: {
page: 'page_current',
totalPage: 'page_total',
total: 'datas_total',
}
},
cb: function (res, scope) {
scope['list'] = res.pcaps;
}
}, $scope);

4、dir-pagination.js
tradeApi
.query({
method: $scope.config.query_method,
root: $scope.config.query_root,
url: $scope.config.query_url,
data: $scope.set_query_params(page_index),
params: $scope.set_query_params(page_index),
load: {
table: function (boolen) {
$scope.config.tableload = boolen;
}
}
})
.then(function (res) {
$scope.paginationConfig.page = res[$scope.config.pagin_key.page];
$scope.paginationConfig.totalPage = res[$scope.config.pagin_key.totalPage];
$scope.paginationConfig.total = res[$scope.config.pagin_key.total];
if (type === 'reload') {
dir_tip.set({
msg: '刷新成功!'
})
}
$scope.config.callback(res);
})