看圖說話，實(shí)現(xiàn)功能是多圖用一個x軸實(shí)現(xiàn)多個柱狀圖、曲線圖
1.模擬父組件 數(shù)據(jù)
chartData:?{
????????xdata:?['Sun',?'Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat'],
????????keyIndex:?[0,?0,?1,?1,?2,?2,?3,?4,?4,?4],
????????itemType:?['line',?'line',?'line',?'line',?'line',?'line',?'bar',?'bar',?'bar',?'bar'],
????????unitArr:?['(℃)',?'(mpa)',?'(T)',?'(T)',?'(T)'],
????????seriesdata:?[
??????????{?name:?'2018-2019',?keyIndex:?0,?data:?[1220,?1832,?1491,?2354,?2960,?3730]?},
??????????{?name:?'2019-2020',?keyIndex:?0,?data:?[2220,?1832,?1941,?2534,?2960,?3370]?},
??????????{?name:?'一次供溫',?keyIndex:?1,?data:?[2240,?1821,?1917,?2334,?23290,?330]?},
??????????{?name:?'一次供溫1-2020',?keyIndex:?1,?data:?[220,?182,?191,?234,?290,?330]?},
??????????{?name:?'一次供溫2-2020',?keyIndex:?2,?data:?[1220,?1842,?191,?234,?1290,?330]?},
??????????{?name:?'一次供溫3-2020',?keyIndex:?2,?data:?[2200,?182,?191,?2304,?290,?330]?},
??????????{?name:?'一次供溫4-2020',?keyIndex:?3,?data:?[220,?1842,?1911,?234,?1290,?330]?},
??????????{?name:?'一次供溫-2020',?keyIndex:?3,?data:?[220,?182,?191,?2344,?290,?330]?},
??????????{?name:?'2019-2020',?keyIndex:?4,?data:?[220,?182,?1910,?234,?2900,?330]?},
??????????{?name:?'2019-一次供溫',?keyIndex:?4,?data:?[220,?1802,?191,?2304,?2090,?330]?}
????????]
??????},
2.引入組件js
import?{?creatChart?}?from?'@/utils/day-chart.js'
3.js實(shí)現(xiàn)
export?function?creatChart(data,?echarts,?el,?options)?{
??const?echartId?=?document.getElementById(el)
??const?chart?=?echarts.init(echartId)
??chart.clear()
??options?=?Object.assign({},?{
????//?曲線上偏移
????chartGridTop:?40,
????//?曲線高度
????chartGridHeight:?180,
????//?曲線默認(rèn)顏色
????echartColor:?['#FFC125',?'#63B8FF',?'#BA55D3',?'#43CD80']
??},?options)
??//?曲線series數(shù)組
??const?makeGridDataArr?=?[]
??//?曲線legend數(shù)組
??const?legendArr?=?[]
??//?直角坐標(biāo)系內(nèi)繪圖網(wǎng)格grid數(shù)組
??const?makeGridArr?=?[]
??//?拼接x坐標(biāo)軸數(shù)組
??const?makeXAxisArr?=?[]
??//?拼接y坐標(biāo)軸數(shù)組
??const?makeYAxisArr?=?[]
??//?類型
??const?keyTypeArr?=?[]
??//?獲取y軸數(shù)據(jù)
??data.seriesdata.forEach((item,?index)?=>?{
????legendArr.push(item.name)
????keyTypeArr.push(item.keyIndex)
????const?arr?=?makeGridData(
??????item.keyIndex,
??????item.keyIndex,
??????data.itemType[index],
??????item.name,
??????item.data,
??????{
????????smooth:?true,
????????barWidth:?10,
????????lineStyle:?{
??????????width:?4
????????}
??????}
????)
????makeGridDataArr.push(arr)
??})
??//?添加grid
??const?keyType?=?[...new?Set(keyTypeArr)]
??const?len?=?keyType.length?-?1
??//?keyType.length?===?0???options.chartGridHeight?=?echartId.parentElement.clientHeight?:?options.chartGridHeight?=?180
??keyType.forEach((item,?index)?=>?{
????makeGridArr.push(
??????makeGrid(
????????options.chartGridTop?+?(options.chartGridHeight?+?50)?*?item,
????????options.chartGridHeight,
????????index,
????????len
??????)
????)
????makeXAxisArr.push(
??????makeXAxis(item,?keyType.length)
????)
????makeYAxisArr.push(
??????makeYAxis(index,?{
????????name:?data.unitArr[index]
??????})
????)
??})
??//?data.unitArr.forEach((item,?index)?=>?{
??//?})
??//?直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
??function?makeGrid(top,?height,?key,?len,?opt)?{
????return?echarts.util.merge(
??????{
????????left:?70,
????????right:?60,
????????top:?top?+?20,
????????height:?height,
????????bottom:?key?===?len???100?:?''
??????},
??????opt?||?{},
??????true
????)
??}
??//?X軸生成器
??function?makeXAxis(gridIndex,?len,?opt)?{
????return?echarts.util.merge(
??????{
????????type:?'category',
????????gridIndex:?gridIndex,
????????axisLine:?{
??????????show:?false,
??????????lineStyle:?{
????????????color:?'#657CA8'
??????????}
????????},
????????splitLine:?{
??????????lineStyle:?{
????????????color:?'#657CA8'
??????????}
????????},
????????//?統(tǒng)一時間軸數(shù)據(jù)
????????data:?data.xdata,
????????axisLabel:?{
??????????show:?gridIndex?===?len?-?1
????????}
??????},
??????opt?||?{},
??????true
????)
??}
??//?Y軸生成器
??function?makeYAxis(gridIndex,?name,?opt)?{
????return?echarts.util.merge(
??????{
????????type:?'value',
????????gridIndex:?gridIndex,
????????name:?name.name,
????????nameTextStyle:?{
??????????color:?'#b3d7ff'
????????},?//?y軸標(biāo)題顏色
????????splitLine:?{
??????????lineStyle:?{
????????????color:?'#657ca833'
??????????}
????????},?//?表格橫線顏色
????????axisLine:?{
??????????show:?false,
??????????lineStyle:?{
????????????color:?'#657CA8'
??????????}?//?y軸數(shù)字顏色
????????},
????????axisTick:?{
??????????show:?false
????????},
????????axisLabel:?{
??????????color:?'#ffffffa6',
??????????textStyle:?{
????????????fontSize:?12
??????????}
????????}
??????},
??????opt?||?{},
??????true
????)
??}
??const?option?=?{
????backgroundColor:?'rgba(255,?0,?0,?0)',
????animation:?false,
????//?標(biāo)題組件，包含主標(biāo)題和副標(biāo)題
????title:?{
??????x:?'center'
????},
????tooltip:?{
??????//?移動端展示方式
??????trigger:?'axis',
??????transitionDuration:?0,
??????confine:?true,
??????bordeRadius:?4,
??????borderWidth:?1,
??????borderColor:?'#b3d7ff',
??????backgroundColor:?'#202e3c',
??????textStyle:?{
????????fontSize:?12,
????????color:?'#b3d7ff',
????????aligin:?'center'
??????},
??????formatter:?function(params)?{
????????//?數(shù)據(jù)單位格式化
????????var?relVal?=?params[0].name?//?x軸名稱
????????relVal?+=?"<div?style='width:120px'>"
????????for?(var?i?=?0,?l?=?params.length;?i?<?l;?i++)?{
??????????//?if?(params[i].value)?{
??????????relVal?+=
??????????????"<span??style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"?+
??????????????params[i].color?+
??????????????";'>"?+
??????????????'<span??style="display:block;padding-left:15px;margin-top:-4px">'?+
??????????????params[i].seriesName?+
??????????????'?:?'?+
??????????????params[i].value?+
??????????????'</span>'?+
??????????????'</span>'?+
??????????????'<br>'
??????????//?}
????????}
????????relVal?+=?'</div>'
????????return?relVal
??????}
????},
????color:?data.color?||?['#FFC125',?'#63B8FF',?'#BA55D3',?'#43CD80'],
????//?坐標(biāo)軸指示器（axisPointer）的全局公用設(shè)置
????axisPointer:?{
??????type:?'shadow',
??????link:?{
????????xAxisIndex:?'all'
??????}
????},
????//?直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
????grid:?makeGridArr,
????legend:?{
??????data:?legendArr,
??????textStyle:?{
????????fontSize:?12,
????????color:?'#b3d7ff'
??????},
??????type:?'scroll',
??????top:?10
??????//?orient:?'vertical',
??????//?right:?0
????},
????xAxis:?makeXAxisArr,
????yAxis:?makeYAxisArr,
????//?dataZoom?組件?用于區(qū)域縮放
????dataZoom:?[{
??????show:?true,
??????realtime:?true,
??????height:?15,
??????borderColor:?'#7ECEF4',
??????backgroundColor:?'#7ECEF4',
??????bottom:?0,
??????textStyle:?{
????????color:?'#7ECEF4'?},
??????xAxisIndex:?keyType
????}],
????//?每個系列通過?type?決定自己的圖表類型
????series:?makeGridDataArr
??}
??chart.setOption(option)
??if?(keyType.length?===?1)?{
????chart.resize({?height:?400?})
??}?else?{
????chart.resize({?height:?(Number(keyType.length?*?250))?})
??}
??//?數(shù)據(jù)生成器
??function?makeGridData(
????xAxisIndex,
????yAxisIndex,
????chartType,
????chartName,
????chartData,
????opt
??)?{
????return?echarts.util.merge(
??????{
????????type:?chartType,
????????name:?chartName,
????????xAxisIndex:?xAxisIndex,
????????yAxisIndex:?yAxisIndex,
????????data:?chartData
??????},
??????opt?||?{},
??????true
????)
??}
}
