153 lines
3.4 KiB
Vue
153 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 年度开工率 -->
|
|
<Echart
|
|
:options="options"
|
|
id="bottomLeftChart"
|
|
height="200px"
|
|
width="100%"
|
|
></Echart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Echart from '@/common/echart'
|
|
export default {
|
|
data () {
|
|
return {
|
|
options: {},
|
|
};
|
|
},
|
|
components: {
|
|
Echart,
|
|
},
|
|
props: {
|
|
cdata: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
},
|
|
watch: {
|
|
cdata: {
|
|
handler (newData) {
|
|
this.options = {
|
|
title: {
|
|
show: true, // 是否显示标题，默认为true
|
|
text: newData.title, // 主标题文本
|
|
x: 'center', // 标题水平位置，默认为'left'
|
|
y: 'top', // 标题垂直位置，默认为'top'
|
|
textStyle: {
|
|
color: '#fff', // 主标题文字颜色
|
|
fontStyle: 'normal', // 主标题文字风格
|
|
fontWeight: 'bold', // 主标题文字粗细
|
|
fontFamily: 'Arial, Verdana, sans-serif', // 主标题文字字体
|
|
fontSize: 18 // 主标题文字大小
|
|
},
|
|
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(255,255,255,0.1)",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
label: {
|
|
show: true,
|
|
backgroundColor: "#7B7DDC"
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
// data: ["已贯通", "计划贯通", "贯通率"],
|
|
textStyle: {
|
|
color: "#B4B4B4"
|
|
},
|
|
top: "0%"
|
|
},
|
|
grid: {
|
|
top:'24%',
|
|
x: "12%",
|
|
width: "88%",
|
|
y: "4%"
|
|
},
|
|
xAxis: {
|
|
data: newData.chart_x,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0735a2"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval:0,
|
|
rotate:20,
|
|
fontSize:5
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
name:'套',
|
|
axisLine: {
|
|
show: false, // 是否显示坐标轴轴线
|
|
},
|
|
splitLine: {
|
|
show: true, // 是否显示网格线
|
|
lineStyle: {
|
|
color: '#0735a2', // 网格线颜色
|
|
width: 1, // 网格线的宽度
|
|
type: 'dashed' // 网格线类型
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}"
|
|
}
|
|
}
|
|
],
|
|
dataZoom: [{
|
|
show: false,
|
|
type: 'slider',
|
|
realtime: true,
|
|
startValue: newData.start,
|
|
endValue: newData.end,
|
|
xAxisIndex: [0],
|
|
bottom: '10',
|
|
left: '30',
|
|
height: 10,
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
textStyle: { color: '#05D5FF' }
|
|
}],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: "#956FD4" },
|
|
{ offset: 1, color: "#3EACE5" }
|
|
])
|
|
}
|
|
},
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: { //数值样式
|
|
color: 'pink',//字体颜色
|
|
fontSize: 10//字体大小
|
|
}
|
|
},
|
|
data: newData.chart_y
|
|
},
|
|
|
|
]
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
},
|
|
},
|
|
}
|
|
</script> |