<template>
<div class="echarts1" ref="echarts1">
</div>
</template>
<script>
export default {
name: 'echarts1',
components: {},
data () {
return {}
},
watch: {},
mounted () {
this.drawLine()
},
methods: {
drawLine () {
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts1)
const dataX = [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
]
const dataBar = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149]
const dataNowY = [23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33]
const dataNowY2 = [20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30]
var option = {
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff',
fontSize: 14,
},
axisPointer: {
lineStyle: {
color: 'rgba(0,133,255,0)',
},
},
},
legend: {
right: '20',
top: 0,
data: ['上线准确率', '上线有效率', '均方差考核水量'],
itemGap: 15,
itemWidth: 15,
itemHeight: 10,
textStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14
},
},
grid: {
top: '60',
right: '25',
bottom: '10%',
left: '25',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: ['0', '20%'],
data: dataX,
axisLine: {
show: true,
textStyle: {
color: 'rgba(23, 40, 82, 1)',
fontSize: 14
},
},
axisLabel: {
textStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14
},
},
axisTick: {
show: false, // 去除刻度线
},
},
yAxis: [
{
type: 'value',
// boundaryGap: ['0', '20%'],
name: '产水',
nameTextStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14,
padding: [0, 0, 0, -40]
},
axisLabel: {
textStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14
},
},
axisTick: { show: false },
axisLine: {
show: true,
textStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14
},
},
splitLine: { show: false },
},
{
type: 'value',
name: '配注',
nameTextStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14,
padding: [0, 0, 0, 40]
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: 'rgba(168, 230, 243, 1)',
fontSize: 14,
},
},
boundaryGap: ['0', '20%'],
axisTick: { show: true },
axisLine: {
show: true,
textStyle: {
color: 'rgba(23, 40, 82, 1)',
fontSize: 14
},
},
splitLine: { show: false },
},
],
series: [
{
name: 'Max',
type: 'bar',
barGap: '-100%',
barWidth: '40%',
silent: true,
symbol:
'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
normal: {
color: 'rgba(17, 44, 111, 0.2)'
}
},
data: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
z: 9,
tooltip: {
show: false,
},
},
{
name: '',
type: 'bar',
barWidth: '40%',
stack: 'one',
labelLine: {
show: false,
lineStyle: {
color: 'transparent',
},
},
itemStyle: {
color: 'transparent',
},
tooltip: {
show: false,
},
data: [80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
},
{
name: '均方差考核水量',
type: 'bar',
barWidth: '40%',
stack: 'one',
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(3, 167, 240, 1)'
},
{
offset: 1,
color: 'rgba(17, 44, 111, 1)'
},
]),
},
data: dataBar,
},
{
name: '上线准确率',
type: 'line',
yAxisIndex: 1,
smooth: true,
symbolSize: 1,
// 设置拐点颜色以及边框
itemStyle: {
color: 'rgba(0,133,255,1)',
},
data: dataNowY,
},
{
name: '上线有效率',
type: 'line',
yAxisIndex: 1,
symbolSize: 1,
smooth: true,
itemStyle: {
color: '#CA8216',
},
data: dataNowY2,
},
],
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: calc(100% - 0px);
}
</style>
