276 lines
9.9 KiB
JavaScript
276 lines
9.9 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("safe-bar-chart", {
|
|
template: `
|
|
<div :style="{'height': height+'px'}" ref="chart"> </div>
|
|
`,
|
|
props: {
|
|
height:{
|
|
type:Number
|
|
},
|
|
project:{
|
|
type: Array,
|
|
},
|
|
data:{
|
|
type: Array,
|
|
},
|
|
legend:{
|
|
type: Array,
|
|
},
|
|
color:{
|
|
type: Array,
|
|
},
|
|
unit:{
|
|
type:String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
option:{},
|
|
timer_tmp:undefined
|
|
}
|
|
},
|
|
mounted(){
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.getChartData()
|
|
},
|
|
//分类及工时情况
|
|
getChartData(){
|
|
var chChartBar = echarts.init(this.$refs.chart);
|
|
this.echartBar(chChartBar)
|
|
},
|
|
echartBar(myChart){
|
|
let newPromise = new Promise((resolve) => {
|
|
resolve()
|
|
})
|
|
//然后异步执行echarts的初始化函数
|
|
newPromise.then(() => {
|
|
var series = []
|
|
for (let i = 0; i <this.data.length ; i++) {
|
|
series.push(
|
|
{
|
|
name: this.legend[i],
|
|
type: "bar",
|
|
barWidth: "15",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: this.color[i][0],
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: this.color[i][1],
|
|
},
|
|
]),
|
|
barBorderRadius: [10,10,0,0],
|
|
},
|
|
},
|
|
data: this.data[i],
|
|
},
|
|
)
|
|
}
|
|
var unit = ''
|
|
if(this.unit == '' || this.unit == undefined){
|
|
unit = ''
|
|
}else{
|
|
unit = '单位：'+this.unit
|
|
}
|
|
var project = []
|
|
for (let i = 0; i < this.project.length; i++) {
|
|
if(this.project[i].length > 8){
|
|
var arr = this.project[i].split("");
|
|
arr.splice(8,0,"\n");
|
|
project.push(arr.join(""))
|
|
}else{
|
|
project.push(this.project[i])
|
|
}
|
|
}
|
|
this.option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "4%",
|
|
bottom: "5%",
|
|
top: "25%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: this.legend,
|
|
center: 'center',
|
|
icon:'circle',
|
|
top: 12,
|
|
textStyle: {
|
|
color: "#c3dbfd",
|
|
fontSize:16
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 15,
|
|
itemGap: 35
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: project,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#194e92",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#c5d9fc",
|
|
margin: 20,
|
|
fontSize:12
|
|
},
|
|
},
|
|
},
|
|
|
|
yAxis: {
|
|
name:unit,
|
|
type: "value",
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#c5d9fc",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#c5d9fc",
|
|
margin: 20,
|
|
fontSize:12
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#0c233e",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
},
|
|
dataZoom: [
|
|
{
|
|
xAxisIndex: 0,// 这里是从X轴的0刻度开始
|
|
show: false, // 是否显示滑动条，不影响使用
|
|
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
startValue: 0, // 从头开始。
|
|
endValue: 2, // 一次性展示多少个。
|
|
},
|
|
],
|
|
series:series
|
|
};
|
|
|
|
myChart.setOption(this.option);
|
|
window.onresize = myChart.resize;
|
|
|
|
var timer_tmp = this.timer_tmp
|
|
if(timer_tmp){
|
|
clearInterval(timer_tmp);
|
|
}
|
|
var app = {
|
|
currentIndex: 0,
|
|
};
|
|
myChart.dispatchAction({
|
|
type: "highlight",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
// 显示 tooltip
|
|
myChart.dispatchAction({
|
|
type: "showTip",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
var dataX = this.project
|
|
var that = this
|
|
timer_tmp = setInterval(function () {
|
|
var dataLen = that.option.series[0].data.length;
|
|
if (that.option.dataZoom[0].endValue == dataX.length ) {
|
|
that.option.dataZoom[0].endValue = 3;
|
|
that.option.dataZoom[0].startValue = 0;
|
|
myChart.setOption(that.option);
|
|
// 取消之前高亮的图形
|
|
myChart.dispatchAction({
|
|
type: "downplay",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
app.currentIndex = 0
|
|
// 高亮当前图形
|
|
myChart.dispatchAction({
|
|
type: "highlight",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
// 显示 tooltip
|
|
myChart.dispatchAction({
|
|
type: "showTip",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
} else {
|
|
that.option.dataZoom[0].endValue = that.option.dataZoom[0].endValue + 1;
|
|
that.option.dataZoom[0].startValue = that.option.dataZoom[0].startValue + 1;
|
|
myChart.setOption(that.option);
|
|
// 取消之前高亮的图形
|
|
myChart.dispatchAction({
|
|
type: "downplay",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|
//console.log(app.currentIndex)
|
|
// 高亮当前图形
|
|
myChart.dispatchAction({
|
|
type: "highlight",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
// 显示 tooltip
|
|
myChart.dispatchAction({
|
|
type: "showTip",
|
|
seriesIndex: 0,
|
|
dataIndex: app.currentIndex,
|
|
});
|
|
}
|
|
},3000)
|
|
|
|
|
|
|
|
})
|
|
},
|
|
},
|
|
watch:{
|
|
project: function (n,o) {
|
|
this.init()
|
|
}
|
|
}
|
|
})
|