<!-- * @Author: zhp * @Date: 2023-09-21 09:06:28 * @LastEditTime: 2024-03-26 16:16:50 * @LastEditors: zhp * @Description: --> <template> <div style="height: 400px;"> <div :id="id" class="productChart" :style="{ height: '420px', width: width }" /> </div> </template> <script> import * as echarts from 'echarts'; import 'echarts/theme/macarons' // echarts theme import resize from './mixins/resize' // import resize from './../mixins/resize' export default { name: 'OverviewBar', mixins: [resize], props: { id: { type: String, default: 'linearBarChart' }, className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, borderRadius: { type: Array, default: () => [9, 9, 0, 0] }, beilv: { type: Number, default: 1 }, height: { type: Number, default: 200 }, showLegend: { type: Boolean, default: false }, nameList: { type: Array, default: () => [] }, dataList: { type: Array, default: () => [] } }, data() { return { chart: null, series: [{ type: 'bar', data: [], barWidth: 6 }] } }, // mounted() { // console.log('mounted') // console.log('borderRadius: ', this.borderRadius) // // this.$nextTick(() => { // // this.initChart() // // }) // }, mounted() { this.$el.addEventListener('resize', () => { console.log('resziing.....'); }); this.initChart() }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart(nameList, passRateList, outputNumList) { console.log(nameList, passRateList) let series= [ { name: '产线产量', type: 'bar', yAxisIndex: 1, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#9DD5FF' }, { offset: 0.3, color: '#1295FF' } ]), label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: '#ced1d5', fontSize: 12 } }, } // barBorderRadius: this.borderRadius }, barWidth: 12, data: outputNumList }, { name: '产线良品率', symbol: 'circle', //变为实心圆 type: 'line', yAxisIndex: 0, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(255, 209, 96, 0.18)' }, { offset: 1, color: 'rgba(255, 234, 153, 0)' } ]) }, itemStyle: { normal: { color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色 lineStyle: { color: 'rgba(255, 209, 96, 1)' //改变折线颜色 } } }, // data: passRateList data: [] } ] // const colors = ['#5470C6', '#91CC75', '#EE6666'] this.chart = echarts.init(document.getElementById(this.id)) this.chart.setOption({ // color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { top: 90, right: 60, bottom: 20, left: 90 }, legend: { itemWidth: 10, itemHeight: 10, top: '0%', right: '20px', data: ['产线产量', '产线良品率'], textStyle: { fontSize: 12 * this.beilv, color: '#ced1d5' } }, xAxis: { type: 'category', axisLine: { lineStyle: { type: 'solid', color: '#25528f', width: '1' // 坐标线的宽度 } }, axisLabel: { color: "#fff", fontSize: 12, // formatter: '{value}' // textStyle: { // color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 // } }, splitLine: { lineStyle: { color: '#25528f' } }, data: nameList }, // yAxis: { // }, yAxis: [ { // min: function() { // 取最小值向下取整为最小刻度 // return 0 // }, // max: function(value) { // 取最大值向上取整为最大刻度 // return Math.ceil(value.max) // }, scale: true, type: 'value', name: '良品率/%', nameTextStyle: {// y轴上方单位的颜色 color: '#fff', align: "left", }, position: 'right', alignTicks: true, axisLine: { show: true, lineStyle: { type: 'solid', color: '#25528f', width: '1' // 坐标线的宽度 } }, axisLabel: { color: "#fff", fontSize: 12, // formatter: '{value}' formatter: '{value}%' // } }, splitLine: { lineStyle: { color: '#25528f' } } // type: 'value' // axisLine: { // show: true, // lineStyle: { // color: colors[0] // } // }, }, { // min: function() { // 取最小值向下取整为最小刻度 // return 0 // }, // max: function(value) { // 取最大值向上取整为最大刻度 // return Math.ceil(value.max) // }, scale: true, type: 'value', name: '产量/片', // y轴上方的单位 nameTextStyle: { color: "#fff", // fontSize: 10, align: "right", }, // position: 'left', alignTicks: true, axisLine: { show: true, lineStyle: { type: 'solid', color: '#25528f', // 左边线的颜色 width: '1' // 坐标线的宽度 } }, axisLabel: { // textStyle: { // color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色 color: "#fff", fontSize: 12, // formatter: '{value}' formatter: '{value} 片' // } }, splitLine: { lineStyle: { color: '#25528f' } } // type: 'value' // axisLine: { // show: true, // lineStyle: { // color: colors[1] // }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8 // }, } ], series: series }) } } } </script> <style> .productChart{ position: absolute; height: 100%; width: 100%; top: -30px; } </style>