188 lines
6.7 KiB
JavaScript
188 lines
6.7 KiB
JavaScript
|
|
Vue.component("popup-bar-chart", {
|
|
template: `
|
|
<!--<div :style="{'height': height+'px'}" ref="chart"> </div>-->
|
|
<div :style="{'height': '500px','width':'100%'}" ref="chart"> </div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Object
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
option:{},
|
|
}
|
|
},
|
|
created(){
|
|
|
|
},
|
|
mounted() {
|
|
//this.init()
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.getChartData()
|
|
},
|
|
//分类及工时情况
|
|
getChartData(){
|
|
var chChartBar = echarts.init(this.$refs.chart);
|
|
this.$nextTick(() => {
|
|
this.echartBar(chChartBar,this.data)
|
|
})
|
|
},
|
|
echartBar(myChart,data){
|
|
let newPromise = new Promise((resolve) => {
|
|
resolve()
|
|
})
|
|
//然后异步执行echarts的初始化函数
|
|
newPromise.then(() => {
|
|
this.option = {
|
|
title: {
|
|
text: data.title,
|
|
textStyle: {
|
|
align: "center",
|
|
color: "#fff",
|
|
fontSize: 25,
|
|
},
|
|
top: "3%",
|
|
left: "5%",
|
|
},
|
|
grid: {
|
|
top: "25%",
|
|
left:"5%",
|
|
right:"5%",
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize:18
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
params[0].name +
|
|
"<br/>" +
|
|
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:12px;height:12px;background-color:rgba(36,207,233,0.9)'></span>" +
|
|
"出勤："+params[0].value+
|
|
"人<br/>"
|
|
);
|
|
},
|
|
},
|
|
/*legend: {
|
|
data: ["主营业务"],
|
|
top: "10%",
|
|
right:0,
|
|
itemWidth: 25,
|
|
itemHeight:20,
|
|
itemGap: 10,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize:20
|
|
},
|
|
},*/
|
|
xAxis: {
|
|
data:data.xAxis,
|
|
axisLine: {
|
|
show: true, //隐藏X轴轴线
|
|
lineStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false, //隐藏X轴刻度
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#cbdaff", //X轴文字颜色
|
|
fontSize:14
|
|
},
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "单位："+data.unit,
|
|
nameTextStyle: {
|
|
color: "#cbdaff",
|
|
fontSize:16
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#FFFFFF",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#cbdaff",
|
|
fontSize:18
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 15,
|
|
/*markLine: {
|
|
silent: true,
|
|
symbol: ['none', 'none'],
|
|
data: [{ type: "average", name: "平均值" }],
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#ffffff',
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
fontSize: 18
|
|
}
|
|
},*/
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color:'#ffffff',
|
|
fontSize:18
|
|
},
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#00FFE3",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#4693EC",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: data.data,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(this.option);
|
|
window.onresize = myChart.resize;
|
|
})
|
|
},
|
|
},
|
|
watch:{
|
|
data:function () {
|
|
this.init()
|
|
}
|
|
}
|
|
})
|