<template> <div class="echarts_con"> <div class="echarts_main" ref="dialog_root" title="节点指标" @close="hideData()" > <!--负载情况--> <div ref="bar_dv" :style="{ width: '100%', minHeight: '300px', }" ></div> </div> </div></template> <script>import echarts from 'echarts'// import myIcon from './image/hot_icon.png' //自定义图标// import averageIcon from './image/hot_icon.png'export default { name: "Echarts", data () { return { maxStr: 400, yInterval: 80, myData: [122, 45, 67, 78, 46], averageData: [32, 34, 6, 73, 84, 40] } }, //外部传入数据的话要监听数据start // props: { // myData: { // type: Array, // default: [] // }, // averageData: { // type: Array, // default: [] // } // }, // computed: { // address () { // const { myData, averageData } = this // return { // myData, // averageData // } // } // }, // watch: { // address: { // handler: function (val) { // this.compare(val.myData, val.averageData) // let newArr = val.myData.concat(val.averageData) // let maxNum = Math.max(...newArr) // this.maxStr = maxNum // if (maxNum >= 500) { // this.yInterval = 200 // } else { // this.yInterval = 50 // } // this.drawLine(val.myData, val.averageData) // }, // deep: true // } // }, // mounted () { // this.$nextTick(function () { // this.drawLine(); // }); // }, //外部传入数据的话要监听数据end mounted () { this.drawLine(this.myData, this.averageData) }, methods: { //判断一一对应数据低于平均就提示 compare (arr1, arr2) { if (arr1[0] < arr2[0]) { this.isCompare = true } else if (arr1[1] < arr2[1]) { this.isCompare = true } else if (arr1[2] < arr2[2]) { this.isCompare = true } else if (arr1[3] < arr2[3]) { this.isCompare = true } else { this.isCompare = false } }, clickClose () { this.isCompare = false }, /*负载情况图标*/ drawLine (a, b) { var myData = a; var averageData = b; let bar_dv = this.$refs.bar_dv; let myChart = echarts.init(bar_dv); var autoHeight = parseInt(this.maxStr / 100) * 10 + 100; myChart.getDom().style.height = autoHeight + "px"; myChart.resize(); //自适应高度 // 绘制图表 myChart.setOption({ title: { text: '报表展示' }, grid: { // left: 40, containLable: true }, tooltip: {}, xAxis: { data: ["看过我的", "沟通过的", "收到简历", "曝光人数"], axisLine: { lineStyle: { type: 'solid', color: '#eeeeee', //x左边线的颜色 fontSize: 13, width: '0.5' //坐标线的宽度 } }, axisLabel: { //x轴字体 textStyle: { color: '#333333', fontSize: 13 } }, }, yAxis: { type: 'value', min: 0, max: this.maxStr, interval: this.yInterval, axisLine: { lineStyle: { type: 'solid', color: '#fff', //左边线的颜色 width: '0.5' //坐标线的宽度 } }, axisLabel: { textStyle: { color: '#333333', fontSize: 13 } }, splitLine: { show: true, lineStyle: { color: ['#eeeeee'], width: 1, type: 'solid' } } }, legend: { itemWidth: 11, itemHeight: 12, symbolKeepAspect: true, textStyle: { fontSize: 11, lineHeight: 0, backgroundColor: "rgba(11, 164, 19, 1)" }, // icon: `image://${averageIcon}`, data: [ { name: '我的', // icon: `image://${myIcon}`//自定义小图标 }, { name: '行业平均', // icon: `image://${averageIcon}` } ], align: 'left', right: 40, top: '0', textStyle: { fontSize: 12, textAlign: 'center', color: '#333333', magrinRight: 3 }, }, series: [{ name: '我的', type: 'bar', data: myData, barWidth: 16, //柱子宽度 barGap: '50%',//间距 label: { show: true, position: 'top', textStyle: { color: '#4695F3' }, formatter: function (params) { return params.value } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#A5CCF6' }, { offset: 1, color: '#4695F3' }]), barBorderRadius: [4, 4, 0, 0], } } }, { name: '行业平均', type: 'bar', data: averageData, barWidth: 16, barGap: '50%', label: { show: true, position: 'top', textStyle: { color: '#FE8401' }, formatter: function (params) { return params.value } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFB235' }, { offset: 1, color: '#FE8401' }]), barBorderRadius: [4, 4, 0, 0], }, emphasis: { barBorderRadius: 30 }, } } ] }, true); }, hideData () { this.$emit("hideDialog") }, confirm () { this.hideData(); }, }}</script> <style scoped>.echarts_con { width: 100%; margin: 0 auto; margin-top: 8px; border-radius: 20px; background: #fff; padding-bottom: 35px;}.echarts_main { width: 100%; margin: 0 auto; padding-top: 20px; margin-bottom: -32px; margin-right: 20px; margin-left: 20px;}.bottom { width: 90%; margin: 0 auto; background: #fef8e1; border-radius: 6px; height: 100%; margin-top: 16px;}.bottom_con { width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 34px; line-height: 34px;}.bottom_text { height: 34px; line-height: 34px; font-size: 13px; font-family: PingFang, PingFang-SC; font-weight: SC; text-align: left; color: #fa5d1d;}.right_close { width: 13px; height: 13px;}</style>
