<template>
<div class="workUnitChart">
<div class="echarts" ref="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import orgAbbreviation from '../utils/orgAbbreviation'
const iconUrl = require('../assets/images/echartsbar/5DA4E9.svg')
const iconUrl1 = require('../assets/images/echartsbar/7FD766.svg')
const iconUrl2 = require('../assets/images/echartsbar/CF39F5.svg')
const iconUrl3 = require('../assets/images/echartsbar/FB9F4A.svg')
export default {
name: 'workUnitChart',
props: ['isshowLine', 'legendList', 'chartList', 'chartListX', 'siteIds', 'gridTop'],
data() {
return {
pictorialBarOffsetAry: []
}
},
mounted() {
//
},
computed: {
changeData() {
if (
this.legendList.length &&
this.chartList.length &&
this.chartListX.length
) {
return true
} else {
return false
}
}
},
watch: {
changeData: {
handler(v) {
if (v) {
this.$nextTick(() => {
this.getEcharts()
})
}
},
immediate: true,
deep: true
}
},
methods: {
pictorialBarOffset(index) {
// console.log(`${-150 + (100 * (index))}%`, 898989898)
// -150 -50 50 150
// 0 1 2 3
if (this.isshowLine === 1) {
return [`${(-50 * (this.chartList.length - 2)) + (100 * (index))}%`, '-50%']
} else {
return [`${(-50 * (this.chartList.length - 1)) + (100 * (index))}%`, '-50%']
}
},
getEcharts() {
let _this = this;
let zoomShow = false
if (this.chartListX.length > 19) {
zoomShow = true
} else {
zoomShow = false
}
var legendList1 = []
if (this.isshowLine === 1) {
legendList1 = [
{
name: '',
color: ' linear-gradient(109deg, #00CEC8 0%, #00CEC8 100%)',
icon: 'image://' + iconUrl1 + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
},
{
name: '',
color: 'linear-gradient(109deg, rgba(175,56,255,0.9) 0%, rgba(175,56,255,0.9) 100%)',
icon: 'image://' + iconUrl2 + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
}
]
}
if (this.isshowLine === 2) {
legendList1 = [
{
name: '',
color: 'rgba(67,221,248,1)',
icon: 'image://' + iconUrl1 + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
},
{
name: '',
color: 'rgba(136,226,110,1)',
icon: 'image://' + iconUrl + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
},
{
name: '',
color: 'rgba(230,147,71,1)',
icon: 'image://' + iconUrl3 + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
},
{
name: '',
color: 'rgba(197,125,238,1)',
icon: 'image://' + iconUrl2 + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
}
]
}
if (this.isshowLine === 3 || this.isshowLine === 4) {
legendList1 = [
{
name: '',
color: ' linear-gradient(109deg, #5DA4E9 0%, #1D59F7 100%)',
icon: 'image://' + iconUrl1 + '' // 格式为'image://+icon文件地址'，其中image::后的//不能省略
}
]
}
legendList1.forEach((i, index) => {
i.name = this.legendList[index]
})
const a = (b) => {
return b.map((c, index1) => {
return c.map((d, index2) => {
let g = 0
for (let e = 0; e <= index1; e++) {
g = g + b[e][index2]
}
return g
})
})
}
const dataq = a(this.chartList)
var colors = []
if (this.isshowLine === 1 || this.isshowLine === 2) {
// linear-gradient(180deg, rgba(0,141,137,1) 0%, rgba(0,206,200,0) 100%);
colors = [
{
color1: ['#4ECAD9', 'rgba(39,84,206,0)'],
color2: ['#0E9DCD', 'rgba(38,130,214,0)'],
color3: '#1BD9E7'
},
{
color1: ['#4CA13A', 'rgba(76,161,58,0)'],
color2: ['#60B855', 'rgba(96,184,85,0)'],
color3: '#88E26E'
},
{
color1: ['#C43F0C', 'rgba(196,63,12,0)'],
color2: ['#D47535', 'rgba(212,117,53,0)'],
color3: '#E69347'
},
{
color1: ['#9044E7', 'rgba(192,109,240,0)'],
color2: ['#C06DF0', 'rgba(192,109,240,0)'],
color3: '#8C57DE'
}
]
}
if (this.isshowLine === 3) {
colors = [
{
color1: ['#3D5CF7', '#B9E8FE'],
color2: ['#4591FD', '#D2F1FE'],
color3: '#6EAFFD'
}
]
}
if (this.isshowLine === 4) {
colors = [
{
color1: ['rgba(0,141,137,1)', 'rgba(0,206,200,0)'],
color2: ['rgba(62,161,255,1)', 'rgba(127,174,254,0)'],
color3: 'rgba(105,178,255,1)'
},
]
}
const series = []
this.chartList.forEach((i, index) => {
// debugger
if (this.chartList.length - index === 1 && this.isshowLine === 1) {
const a = [
{
name: legendList1[index].name,
type: 'line',
// symbolSize: 10,
symbol: 'none',
itemStyle: {
normal: {
color: '#A03AE4',
barBorderRadius: 0
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(175,56,255,.61)'
},
{
offset: 1,
color: 'rgba(255,89,89,0)'
}
])
},
data: i
}
]
series.push(...a)
} else {
const b = [
{
name: legendList1[index].name,
tooltip: {
show: false
},
type: 'bar',
stack: 'z' + index,
barWidth: 7,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: colors[index].color1[1] // 0% 处的颜色
},
{
offset: 1,
color: colors[index].color1[0] // 100% 处的颜色
}
],
false
)
}
},
data: i,
barGap: '15%',
},
{
type: 'bar',
barWidth: 7,
stack: 's' + index,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: colors[index].color2[1] // 0% 处的颜色
},
{
offset: 1,
color: colors[index].color2[0] // 100% 处的颜色
}
],
false
)
}
},
barGap: '-2%',
data: i
},
{
name: 'b',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
color: colors[index].color3
},
symbol: 'diamond',
symbolSize: ['14', '4'],
symbolPosition: 'end',
data: i,
z: 3,
symbolOffset: this.pictorialBarOffset(index)
}
]
series.push(...b)
}
})
// const a = []
dataq.forEach((i, index) => {
const o = {
name: 'b',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
color: colors[index].color3
},
symbol: 'diamond',
symbolSize: ['14', '4'],
symbolPosition: 'end',
data: i,
z: 3,
// symbolOffset: this.pictorialBarOffset(index)
}
if (this.isshowLine === 1) {
if (this.chartList.length - index !== 1) {
// series.push(o)
console.log(o)
}
} else {
// series.push(o)
}
})
console.log(this.chartList, 'this is ss', series)
// const line =
// series.push(line)
let option = {}
option = {
// backgroundColor: '#041730',
tooltip: {
trigger: 'axis',
// formatter: '{b} : {c}',
padding: [8, 20, 8, 14],
// backgroundColor: 'transparent',
borderWidth: 0,
extraCssText:
'border-radius: 2px;background: rgba(17,56,80,1);border: 1px solid rgba(20,132,174,1);box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.5);',
formatter: (params) => {
var str = ''
params.forEach((i, index) => {
var s = ''
if (this.isshowLine === 3 || this.isshowLine === 4) s = i.name
else s = legendList1[index].name
str +=
'<div class="tooltip-title">' +
`<div class="tooltip-dian" style="background:${legendList1[index].color}"></div>` +
'<div class="tooltip-info">' +
s +
'</div>' +
'<div class="tooltip-num">' +
params[index].value +
'</div>' +
'</div>'
})
str = '<div class="tooltip-box">' + str + '</div>'
return str
},
axisPointer: {
// type: 'shadow',
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
color: 'rgba(9,81,128,0.64)', // 线的颜色
width: 1,
type: 'dashed'
}
}
},
grid: {
top: this.gridTop || '10%',
left: '0',
right: '2%',
bottom: '5%',
containLabel: true
},
dataZoom: {
show: zoomShow,
type: 'slider',
zoomLock: true,
minValueSpan: 19,
maxValueSpan: 19,
left: 2,
right: 13,
bottom: 0,
height: 5,
backgroundColor: '#063F67',
start: 0,
borderColor: 'none',
end: 20,
dataBackground: {
lineStyle: {
color: 'none'
},
areaStyle: {
color: 'none'
}
},
selectedDataBackground: {
lineStyle: {
color: 'none'
},
areaStyle: {
color: 'none'
}
},
borderWidth: 2,
handleSize: '0px',
fillerColor: '#04D4DD',
moveHandleSize: 0,
showDetail: false
},
legend: {
// show: this.isshowLine === 1,
show: false,
data: legendList1,
right: 0,
top: 0,
selectedMode: false, // 图例点击失效
textStyle: {
fontSize: 12,
color: '#fff'
},
// selectedMode: "single",
itemWidth: 12, // 设置宽度
itemHeight: 6, // 设置高度
itemGap: 20 // 设置间距
},
xAxis: {
data: this.chartListX.map(ele => {
// ele = orgAbbreviation[ele]
// console.log(ele, 'tttttttttttt', orgAbbreviation[ele])
return orgAbbreviation[ele] || ele
}),
// 坐标轴
axisLine: {
lineStyle: {
color: '#9488FF'
}
},
triggerEvent: {
show: true
},
// 坐标值标注
axisLabel: {
show: true,
interval: 0,
formatter: function (value, index) {
// x轴的文字改为竖版显示
console.log(_this, 'this is ddd', index)
var str = value.match(/.{1,2}/g)
if (str.length > 5) {
str = str.slice(0, 5)
str.push('...')
}
return str.join('\n')
},
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
}
},
yAxis: {
// 坐标轴
axisLine: {
show: false
},
// 坐标值标注
axisLabel: {
show: true,
textStyle: {
color: '#9AAAC8'
}
},
// 分格线
splitLine: {
lineStyle: {
color: 'rgba(9,81,128,0.64)'
}
}
},
series
}
echarts.init(this.$refs.echarts).setOption(option)
echarts
.init(this.$refs.echarts)
.getZr()
.on('click', (params) => {
const pointInPixel = [params.offsetX, params.offsetY]
if (
echarts.init(this.$refs.echarts).containPixel('grid', pointInPixel)
) {
// 点击第几个柱子
const pointInGrid = echarts
.init(this.$refs.echarts)
.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
// console.log(pointInGrid)
// 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
// 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
// x轴数据的索引
const index = pointInGrid[0]
if (this.isshowLine === 1) {
this.$store.commit('fixCurTite', '施工作业信息公示平台')
this.$store.commit(
'fixiframeSrc',
`http://pre-job-public.standard-platform-prd.uat.tlmyt.petrochina/tarim?siteId=${this.siteIds[index]}`
)
}
if (this.isshowLine === 2) {
this.$store.commit('fixCurTite', '标准化工作管理平台')
this.$store.commit(
'fixiframeSrc',
'http://swp-front.standard-platform-prd.uat.tlmyt.petrochina/produce/risk/jobStatistics'
)
}
if (this.isshowLine === 3 || this.isshowLine === 4) {
// this.$store.commit('fixCurTite', 'HSE监督助手平台')
// this.$store.commit('fixiframeSrc', `https://tlm.asstar.net:37002/sup-assistant-front/#/superviseSt/dangerSt?hhid=${this.$store.state.hhid}&jwt=${this.$store.state.tlmToken}`)
window.open(
`https://tlm.asstar.net:37002/sup-assistant-front/#/login?hhid=${this.$store.state.hhid}&jwt=${this.$store.state.tlmToken}&redirect=/superviseSt/dangerSt`,
'_blank'
)
}
}
})
this.extension(echarts.init(this.$refs.echarts), '.box1')
},
extension(chart2) {
// 判断是否创建过div框,如果创建过就不再创建了
// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
var id = document.getElementById('extension')
if (!id) {
// var div = "<div id = 'extension' sytle=\"display:block\"></div>"
// $('html').append(div)
const html = document.documentElement
const div = document.createElement('div')
div.id = 'extension'
div.display = 'block'
html.appendChild(div)
}
chart2.on('mouseover', (params) => {
if (params.componentType === 'xAxis') {
// 设置悬浮文本的位置以及样式
const div = document.getElementById('extension')
div.style.position = 'absolute'
div.style.color = '#000'
div.style['font-size'] = '12px'
div.style.padding = '5px'
div.style.display = 'inline'
div.style['border-radius'] = '4px'
div.style['background-color'] = 'rgb(17, 56, 80)'
div.style['box-shadow'] = 'rgba(0, 0, 0, 0.3) 2px 2px 8px'
div.innerText = params.value
const html = document.documentElement
html.onmousemove = function (e) {
var xx = e.pageX + 18
var yy = e.pageY + 15
document.getElementById('extension').style.top = yy + 'px'
document.getElementById('extension').style.left = xx + 'px'
}
}
})
chart2.on('mouseout', function (params) {
if (params.componentType === 'xAxis') {
document.getElementById('extension').style.display = 'none'
document.getElementById('extension').style.innerText = ''
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.workUnitChart {
width: 100%;
height: 100%;
.echarts {
width: 100%;
height: 100%;
/deep/.tooltip-box {}
/deep/.tooltip-title {
font-size: 12px;
color: #01112f;
letter-spacing: 0;
line-height: 12px;
font-weight: 500;
display: flex;
align-items: center;
.tooltip-dian {
width: 6px;
height: 6px;
opacity: 0.9;
margin-right: 8px;
border-radius: 1px;
}
}
/deep/ .tooltip-info {
font-size: 12px;
letter-spacing: 0;
line-height: 12px;
padding: 6px 0;
margin-right: 30px;
flex: 1;
color: #fff;
}
/deep/ .tooltip-num {
font-size: 12px;
letter-spacing: 0;
line-height: 12px;
font-weight: 500;
color: #fff;
}
}
}</style>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
