看图说话，实现功能是多图用一个x轴实现多个柱状图、曲线图
1.模拟父组件 数据
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实现
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,
// 曲线默认颜色
echartColor: ['#FFC125', '#63B8FF', '#BA55D3', '#43CD80']
}, options)
// 曲线series数组
const makeGridDataArr = []
// 曲线legend数组
const legendArr = []
// 直角坐标系内绘图网格grid数组
const makeGridArr = []
// 拼接x坐标轴数组
const makeXAxisArr = []
// 拼接y坐标轴数组
const makeYAxisArr = []
// 类型
const keyTypeArr = []
// 获取y轴数据
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) => {
// })
// 直角坐标系内绘图网格
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'
}
},
// 统一时间轴数据
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轴标题颜色
splitLine: {
lineStyle: {
color: '#657ca833'
}
}, // 表格横线颜色
axisLine: {
show: false,
lineStyle: {
color: '#657CA8'
} // y轴数字颜色
},
axisTick: {
show: false
},
axisLabel: {
color: '#ffffffa6',
textStyle: {
fontSize: 12
}
}
},
opt || {},
true
)
}
const option = {
backgroundColor: 'rgba(255, 0, 0, 0)',
animation: false,
// 标题组件，包含主标题和副标题
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) {
// 数据单位格式化
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'],
// 坐标轴指示器（axisPointer）的全局公用设置
axisPointer: {
type: 'shadow',
link: {
xAxisIndex: 'all'
}
},
// 直角坐标系内绘图网格
grid: makeGridArr,
legend: {
data: legendArr,
textStyle: {
fontSize: 12,
color: '#b3d7ff'
},
type: 'scroll',
top: 10
// orient: 'vertical',
// right: 0
},
xAxis: makeXAxisArr,
yAxis: makeYAxisArr,
// dataZoom 组件 用于区域缩放
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)) })
}
// 数据生成器
function makeGridData(
xAxisIndex,
yAxisIndex,
chartType,
chartName,
chartData,
opt
) {
return echarts.util.merge(
{
type: chartType,
name: chartName,
xAxisIndex: xAxisIndex,
yAxisIndex: yAxisIndex,
data: chartData
},
opt || {},
true
)
}
}
