echarts 柱状图头部显示头像
来源:互联网 发布:淘宝ifashion全是女装 编辑:程序博客网 时间:2024/06/05 06:28
var app = angular.module("app", ['ngDatepicker']);
app.controller("AppController", function ($scope, $http) {
//搜索
$scope.searchData = function () {
try {
var timeStart = $scope.search.TimeStart + '-' + 1;
var timeEnd = $scope.search.TimeEnd + '-' + 1;
var postData = {
timeStart: timeStart,
timeEnd: timeEnd
};
$http.post('/Analysis/GetSalesAchievementRanked', postData).success(function (result) {
$scope.$broadcast("chartData", result);
}).error(function (e) {
alert('服务器内部错误');
});
} catch (ex) {
}
}
});
app.directive("echarts", function () {
return {
require: '?ngModel',
restrict: 'C',
link: function ($scope, element, option, ngModel) {
//接受控制器返回的消息
$scope.$on("chartData", function (event, data) {
var labels = new Array();
var datas = new Array();
var datasimg = new Array();
for (var i = 0; i < data.length; i++) {
labels.push(data[i].salesName);
datas.push({
value: data[i].saleMoney,
symbol: 'rect'
});
datasimg.push({
value: data[i].saleMoney,
symbol: 'image://' + (data[i].profile != null ? data[i].profile : '@App.assets/images/defaultpt.png'),
symbolSize: [28, 28]
});
}
var barHeitht = 30 * datas.length;
var pieHeight = barHeitht - 335;
$(element).css('height', barHeitht + 'px');
var myChart = echarts.init($(element)[0]);
// 图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
myChart.hideLoading();
myChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis',
formatter: "{a}<br/> {b} : {c}元",
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'none' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: []
},
grid: {
left: '19%',
right: '12%',
top: '10px',
bottom: '10px'
},
xAxis: [{
type: 'value',
boundaryGap: [0, 0.01],
position: 'top',
name: '业绩',
nameTextStyle: {
color: '#49433f',
fontSize: 10
},
axisLine: {
lineStyle: {
color: '#e2e2e2',
width: '1'
}
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#e2e2e2',
width: '1'
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
}],
yAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#e2e2e2',
width: '1'
}
},
axisLabel: {
textStyle: {
fontSize: 13,
color: '#000'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
data: labels
}],
series: [{
name: '销售业绩',
type: 'pictorialBar',
data: datas,
itemStyle: {
normal: {
//color: ['rgba(75,192,192,0.3)'],
color: function (params) {
//首先定义一个数组
var colorList = [
'#FF9900', '#CAE1FF', '#BF3EFF', '#00CCFF', '#ff8a23', '#ADFF2F', '#EFE42A', '#EE3A8C', '#EEE685', '#31F0CA',
'#FF4040', '#FFB6C1', '#FFEC8B', '#00ff99', '#993366', '#ff6699', '#ff99ff', '#99ccff',
'#FF9900', '#ff66ff', '#64BD3D', '#FF82AB', '#29AAE3',
'#DB7093', '#ff66ff', '#C43C57', '#4169E1',
'#48D1CC', '#4F94CD', '#CDB38B'
];
return colorList[params.dataIndex]
},
barBorderRadius: 0,
label: {
show: false,
position: 'right',
textStyle: {
color: '#49433f',
fontSize: 13
}
}
}
}
}, {
name: '销售业绩',
type: 'pictorialBar',
data: datasimg,
symbolPosition: 'end',
symbolOffset: ['120%', 0],
itemStyle: {
normal: {
//color: ['rgba(75,192,192,0.3)'],
barBorderRadius: 10,
label: {
show: true,
position: 'right',
textStyle: {
color: '#49433f',
fontSize: 13
}
}
}
}
}]
});
window.onresize = myChart.resize;
});
}
}
});
<div class="row padding15-30 white-bg">
<div class="rank-b echarts" id="dServantRankBar" style="height:500px"></div>
</div><!--row -->
app.controller("AppController", function ($scope, $http) {
//搜索
$scope.searchData = function () {
try {
var timeStart = $scope.search.TimeStart + '-' + 1;
var timeEnd = $scope.search.TimeEnd + '-' + 1;
var postData = {
timeStart: timeStart,
timeEnd: timeEnd
};
$http.post('/Analysis/GetSalesAchievementRanked', postData).success(function (result) {
$scope.$broadcast("chartData", result);
}).error(function (e) {
alert('服务器内部错误');
});
} catch (ex) {
}
}
});
app.directive("echarts", function () {
return {
require: '?ngModel',
restrict: 'C',
link: function ($scope, element, option, ngModel) {
//接受控制器返回的消息
$scope.$on("chartData", function (event, data) {
var labels = new Array();
var datas = new Array();
var datasimg = new Array();
for (var i = 0; i < data.length; i++) {
labels.push(data[i].salesName);
datas.push({
value: data[i].saleMoney,
symbol: 'rect'
});
datasimg.push({
value: data[i].saleMoney,
symbol: 'image://' + (data[i].profile != null ? data[i].profile : '@App.assets/images/defaultpt.png'),
symbolSize: [28, 28]
});
}
var barHeitht = 30 * datas.length;
var pieHeight = barHeitht - 335;
$(element).css('height', barHeitht + 'px');
var myChart = echarts.init($(element)[0]);
// 图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
myChart.hideLoading();
myChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis',
formatter: "{a}<br/> {b} : {c}元",
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'none' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: []
},
grid: {
left: '19%',
right: '12%',
top: '10px',
bottom: '10px'
},
xAxis: [{
type: 'value',
boundaryGap: [0, 0.01],
position: 'top',
name: '业绩',
nameTextStyle: {
color: '#49433f',
fontSize: 10
},
axisLine: {
lineStyle: {
color: '#e2e2e2',
width: '1'
}
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#e2e2e2',
width: '1'
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
}],
yAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#e2e2e2',
width: '1'
}
},
axisLabel: {
textStyle: {
fontSize: 13,
color: '#000'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
data: labels
}],
series: [{
name: '销售业绩',
type: 'pictorialBar',
data: datas,
itemStyle: {
normal: {
//color: ['rgba(75,192,192,0.3)'],
color: function (params) {
//首先定义一个数组
var colorList = [
'#FF9900', '#CAE1FF', '#BF3EFF', '#00CCFF', '#ff8a23', '#ADFF2F', '#EFE42A', '#EE3A8C', '#EEE685', '#31F0CA',
'#FF4040', '#FFB6C1', '#FFEC8B', '#00ff99', '#993366', '#ff6699', '#ff99ff', '#99ccff',
'#FF9900', '#ff66ff', '#64BD3D', '#FF82AB', '#29AAE3',
'#DB7093', '#ff66ff', '#C43C57', '#4169E1',
'#48D1CC', '#4F94CD', '#CDB38B'
];
return colorList[params.dataIndex]
},
barBorderRadius: 0,
label: {
show: false,
position: 'right',
textStyle: {
color: '#49433f',
fontSize: 13
}
}
}
}
}, {
name: '销售业绩',
type: 'pictorialBar',
data: datasimg,
symbolPosition: 'end',
symbolOffset: ['120%', 0],
itemStyle: {
normal: {
//color: ['rgba(75,192,192,0.3)'],
barBorderRadius: 10,
label: {
show: true,
position: 'right',
textStyle: {
color: '#49433f',
fontSize: 13
}
}
}
}
}]
});
window.onresize = myChart.resize;
});
}
}
});
<div class="row padding15-30 white-bg">
<div class="rank-b echarts" id="dServantRankBar" style="height:500px"></div>
</div><!--row -->
阅读全文
0 0
- echarts 柱状图头部显示头像
- echarts柱状图显示数值
- echarts柱状图虚线显示
- echarts柱状图显示太靠左
- ECharts柱状图百分比显示
- echarts 显示柱状图
- Echarts 柱状图x轴显示全部类目
- echarts 柱状图 ,颜色和显示设置
- echarts 实现柱状图左右横向显示
- echarts柱状图不同颜色与显示数值
- Echarts柱状图
- echarts-柱状图
- echarts 柱状图
- echarts柱状图
- echarts-柱状图
- echarts柱状图
- echarts动态加载数据,显示柱状图,饼图图表
- Echarts柱状图的每个柱子显示不同颜色问题
- samba服务器
- 插入排序算法(十一)
- 新特性总结-JDK1.1
- 工厂模式与抽象工厂模式的区别
- 国内获取Docker镜像缓慢
- echarts 柱状图头部显示头像
- iOS 响应者链条
- 线上操作与线上问题排查实战
- 骑士移动
- 求凸包的两种算法
- mysql中获得日期的上一月时间
- Python与MongoDB
- 关于在RK3288上安装Opencv的方法
- Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构