做项目时根据设计图用echarts来进行展现数据统计
设计图需要实现效果
根据设计图进行实现的代码、代码里也进行处理了双y轴不重叠问题
<template><chart-item :option="optionBing" style-props="width: 378px;height: 212px;margin:10px 10px 0 0" /></template><script>import ChartItem from '@/components/ModChart'export default {name: 'ChartAddUnlockStatistics',components: { ChartItem },props: {chartParams: {type: Object,default: () => {}}},data() {return {listdata: [],min1: '',min2: ''}},computed: {optionBing() {const timeData = JSON.parse(JSON.stringify(this.chartParams.timeData))// 获取当前扭转数值和角度数值的最小极值this.getNum()return {color: ['#22AA38', '#0064FF'],backgroundColor: '#fff',title: {text: this.chartParams.title},grid: {left: '15%',right: '20%',bottom: '15%'},tooltip: {backgroundColor: 'rgba(0, 0, 0, 0.4)',padding: [8, 8, 8, 8],trigger: 'axis',formatter(params) {// 先将时间进行拼接添加样式let str = `<span style="color: #FFFFFF;font-size: 16px;">${params[0].name}</span>` + '<br />' + `<span style="color: #FFFFFF;font-size: 12px;">${timeData[params[0].dataIndex].split(' ')[0]}</span>` + '<br />'// 对数据进行遍历设置好样式和时间进行拼接params.forEach((item, index) => {str += `<span style="color: #FFFFFF;font-size: 14px;">${item.seriesName + ' : ' + item.data}</span>` + `<span style="color: #FFFFFF;font-size: 14px;">${item.seriesName === '扭矩' ? 'N·m' : '°'}</span>` + '<br />'})return str},axisPointer: {type: 'cross',animation: false,label: {backgroundColor: 'rgba(0, 0, 0, 0.35)'}}},legend: {data: ['扭矩', '角度'],icon: 'rect',itemWidth: 20,itemHeight: 3.5,align: 'auto',right: 5},xAxis: [{type: 'category',boundaryGap: false,axisLine: { onZero: false },axisLabel: {interval: this.chartParams.timeData.length - 2,formatter: function(value, index) {// 获取当前x轴的数组长度const length = timeData.length// 获取当前数组第一条数据的年月日const timeDayOne = timeData[0].split(' ')[0]// 获取最后一条数据的年月日const timeDayTwo = timeData[length - 1].split(' ')[0]// 判断x轴数组第一个年月日是否和最后一个数据的年月日是否相同if (timeDayOne === timeDayTwo) {return value} else {// 当两者不相同时给最后一个年月日前添加 +1的标识if (index === 0) {return value} else {return '{a|+1}{b| }' + value}}},// 设置+1标识的样式rich: {a: {color: '#0064FF',padding: [2, 4, 2, 4],borderRadius: 5,borderWidth: 1,borderColor: '#0064FF',align: 'center'},b: {width: 10}}},data: timeData.map(function(str) {return str.split(' ')[1]})}],yAxis: [{name: '扭矩 (N·m)',type: 'value',axisLine: {show: false,onZero: false},axisTick: {show: false},splitLine: {// show: false,lineStyle: {color: 'rgba(221, 217, 217, 1)'}},min: this.min1},{name: '角度 (°)',alignTicks: true,type: 'value',splitLine: {show: false,lineStyle: {color: 'rgba(221, 217, 217, 1)'}},axisLine: {show: false,onZero: false},axisTick: {show: false},min: this.min2}],series: [{name: '扭矩',type: 'line',smooth: true,yAxisIndex: 0,data: this.chartParams.reverseData},{name: '角度',type: 'line',smooth: true,yAxisIndex: 1,data: this.chartParams.angleToData}]}}},methods: {getNum() {// 理想行数（实际行数会有浮动）const rowNum = 6const data1 = this.chartParams.reverseDataconst data2 = this.chartParams.angleToData/* 数据极值* max1 扭矩最大值* max2 角度的最大值* min1 扭矩的最小值* min2 角度的最小值* */const max1 = Math.max(...data1)const max2 = Math.max(...data2)let min1 = Math.min(...data1)let min2 = Math.min(...data2)/* 极值比例*/const rat1 = min1 / max1const rat2 = min2 / max2/* 比例大小对比*/const ratState = rat1 > rat2/* 设置极小值*/if (ratState) {min1 = rat2 * max1} else {min2 = rat1 * max2}/** inter1 扭矩的行高取整* inter2 角度的行高取整* */const inter1 = Math.ceil((max1 - min1) / rowNum)const inter2 = Math.ceil((max2 - min2) / rowNum)/* 对极值微调*/this.min1 = Math.floor(min1 / inter1) * inter1this.min2 = Math.floor(min2 / inter2) * inter2}}}</script><style lang="scss">.unlockStyle{display: flex;flex-wrap: wrap;}</style>
