把后端返回的复杂数据转换为ECharts需求用的数据
数据:
0:{category: "来喜", ddate: "2021-08-09", price: 3000}
1: {category: "来喜", ddate: "2021-08-17", price: 5}
2: {category: "五洲", ddate: "2021-08-17", price: 5}
3: {category: "恒升", ddate: "2021-08-17", price: 5}
4: {category: "东源", ddate: "2021-08-17", price: 5}
5: {category: "腾远", ddate: "2021-08-17", price: 5}
6: {category: "鑫义", ddate: "2021-08-17", price: 5}
7: {category: "北海", ddate: "2021-08-17", price: 5}
8: {category: "东风镁业", ddate: "2021-08-17", price: 5}
9: {category: "泰和", ddate: "2021-08-17", price: 5}
10: {category: "江泰", ddate: "2021-08-17", price: 5}
11: {category: "祥荣", ddate: "2021-08-17", price: 5}
12: {category: "江泰总公司", ddate: "2021-08-17", price: 1}
13: {category: "同得利", ddate: "2021-08-17", price: 1}
14: {category: "鑫泰", ddate: "2021-08-17", price: 1}
15: {category: "君正", ddate: "2021-08-17", price: 1}
16: {category: "鄂绒", ddate: "2021-08-17", price: 1}
实现过程:
<template><div class="pricePlatT_firstOilChart"><SubTtile :title="title"></SubTtile><!-- 1#油价格折线图 --><div id="pricePlatT_firstOilChart" :ref="id"></div></div>
</template><script>
import {reqDlSupplyPriceCompare} from '@api/PricePlatT'
import * as echarts from "echarts";
import SubTtile from "../../../components/SubTitle/index";
export default {name: "",components: {SubTtile},props: {title: {type: String,default: ""},id: {type: String,default: `bar${new Date().getTime()}`}},data() {return {dateDate: [],// 恒升bData: [],// 祥荣jData: [],// 德润zData: [],// 鑫义xData: [],// 创源lData: [],// 东风镁业tData: [],// 泰和hData: [],// 天元yData: [],beginDate:[],endDate:[],itemData: {},category :[],ddate :[],price :[],seriesData:[]};},created(){this.beginDate = this.dayjs().subtract(14,'day').format('YYYY-MM-DD')this.endDate = this.dayjs().subtract(0,'day').format('YYYY-MM-DD')},mounted() {this.getDlSupplyPriceCompare()},methods: {async getDlSupplyPriceCompare(){let category=[]let ddate =[]let price =[]const res = await reqDlSupplyPriceCompare(this.beginDate,this.endDate)res.data.forEach(item => {category.push(item.category)ddate.push(item.ddate)price.push(parseFloat(item.price).toFixed(2))})// console.log(new Set(category), new Set(ddate), price, 'shuji')this.category=[...new Set(category)]this.ddate=[ ... new Set(ddate)]this.category.forEach(el => {this.itemData[el] = []res.data.forEach((item, f) => {if (el === item.category) {// ddate.forEach((j,i)=>{})let a = this.ddate.indexOf(item.ddate)// this.itemData[el][a] = parseFloat(item.price).toFixed(2)this.itemData[el][a]=item.price// this.itemData[el].push(item.price)}})})// console.log(this.itemData, 'ppp')for(let i in this.itemData){this.seriesData.push({type: "line",name: i,smooth: true, //是否平滑showAllSymbol: true,symbol: "circle",symbolSize: 2,// lineStyle: {// normal: {// color: "#33e5ba",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },label: {show: false,position: "top",textStyle: {color: "#fff",fontSize: 14}},// itemStyle: {// color: "",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },tooltip: {show: true},// data: this.bDatadata: this.itemData[i]},)}// res.data.forEach((item,i)=>{// let arr = []// arr[0] = item.ddate.substring(6)// const index = this.dateDate.indexOf(item.ddate.substring(6))// if(index < 0){// this.dateDate.push(arr[0])// }// if(item.category === ''){// let a = (this.dateDate).indexOf(item.ddate.substring(6))// this.bData[a] = parseFloat(item.price).toFixed(2)// }// else if(item.category === '祥荣'){// let b = (this.dateDate).indexOf(item.ddate.substring(6))// this.jData[b] = parseFloat(item.price).toFixed(2)// }else if(item.category === '德润'){// let c = (this.dateDate).indexOf(item.ddate.substring(6))// this.zData[c] = parseFloat(item.price).toFixed(2)// }else if(item.category === '鑫义'){// let d = (this.dateDate).indexOf(item.ddate.substring(6))// this.xData[d] = parseFloat(item.price).toFixed(2)// }else if(item.category === '创源'){// let e = (this.dateDate).indexOf(item.ddate.substring(6))// this.lData[e] = parseFloat(item.price).toFixed(2)// }else if(item.category === '东风镁业'){// let f = (this.dateDate).indexOf(item.ddate.substring(6))// this.tData[f] = parseFloat(item.price).toFixed(2)// }else if(item.category === '泰和'){// let g = (this.dateDate).indexOf(item.ddate.substring(6))// this.hData[g] = parseFloat(item.price).toFixed(2)// }else{// let h = (this.dateDate).indexOf(item.ddate.substring(6))// this.yData[h] = parseFloat(item.price).toFixed(2)// }// })},firstOilChart() {let myChart = echarts.init(this.$refs[this.id]);let option = {legend: {left: 0,icon: "rect",itemWidth: 10,itemHeight: 10,padding: [10, 0],textStyle: {color: "#fff",fontSize: 12}},tooltip: {// 坐标轴触发trigger: "axis",backgroundColor: "rgba(48,142,213,0.7)",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)"},{offset: 0.5,color: "rgba(255, 255, 255,1)"},{offset: 1,color: "rgba(0, 255, 233,0)"}],global: false}}}},grid: {top: "14%",left: "0%",right: "0%",bottom: "0%",containLabel: true},xAxis: [{type: "category",axisLine: {show: true,lineStyle: {color: "rgba(17,100,157,0.3)"}},splitArea: {color: "#fff",lineStyle: {color: "white"}},axisLabel: {textStyle: {fontFamily: "Microsoft YaHei",color: "#fff"},align: "right"},// 是否显示分隔线splitLine: {show: false},//坐标轴两边留白策略boundaryGap: false,data: this.ddate}],yAxis: {type: "value",axisLine: {//文字颜色show: false,lineStyle: {color: "rgba(17,100,157,0.3)"}},splitLine: {//线条颜色show: true,lineStyle: {color: "rgba(255,255,255,0.1)"}},axisLabel: {formatter: value => {return value;},textStyle: {color: "#fff"}},min: function(value) {return value.min - 20;}},// 系列列表series:this.seriesData// series: [// {// type: "line",// name: "恒升",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#33e5ba",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#33e5ba",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.bData// },// {// type: "line",// name: "祥荣",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#34d1fe",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#34d1fe",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.jData// },// {// type: "line",// name: "德润",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#eee632",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#eee632",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.zData// },// {// type: "line",// name: "鑫义",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#ff681e",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#ff681e",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.xData// },// {// type: "line",// name: "创源",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#ff3a52",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#ff3a52",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.lData// },// {// type: "line",// name: "东风镁业",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#385eff",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#385eff",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.tData// },// {// type: "line",// name: "泰和",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#0ef946",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#0ef946",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.hData// },// {// type: "line",// name: "天元",// smooth: true, //是否平滑// showAllSymbol: true,// symbol: "circle",// symbolSize: 2,// lineStyle: {// normal: {// color: "#fff",// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 5,// shadowOffsetX: 5// }// },// label: {// show: false,// position: "top",// textStyle: {// color: "#fff",// fontSize: 14// }// },// itemStyle: {// color: "#fff",// borderColor: "rgb(0,115,100)",// borderWidth: 0,// shadowColor: "rgba(0, 0, 0, 0)",// shadowBlur: 0,// shadowOffsetY: 0,// shadowOffsetX: 0// },// tooltip: {// show: true// },// data: this.yData// },// ]};myChart.setOption(option);// echarts自适应屏幕大小window.addEventListener("resize", function() {myChart.resize();});}},watch:{// dateDate(){// this.firstOilChart()// }ddate (){this.firstOilChart()}}
};
</script><style lang="less" scoped>
.pricePlatT_firstOilChart {width: 100%;height: calc(100% - 40px);
}
#pricePlatT_firstOilChart {width: 100%;height: 100%;margin-top: 26px;
}
</style>
