图表由两段折线组成,实线的数据前半部分是具体数字,后半段是’-‘,虚线部分前半段是’-',后半段是具体的数字。两个段线之前的连接部分要虚线部分把实线部分最后一个有具体值的数字放在虚线的数据的对应位置,这样两段线才可以连贯
historyList:[283,99,412,88,323,996,'-','-','-','-','-','-'],
futureList:['-','-','-','-','-',996,233,234,45,231,534,356],
dateList:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
const options ={
grid: {
top: '20%',
bottom: '20%',
left:'15%'
},
tooltip: {
trigger: "axis",
formatter: function(params) {
const valMap = {}
let html = `${params[0].name}<br>`
params.forEach(param => {
// 过滤无效值和重叠值
if (
param.value === "-" ||
valMap[param.seriesName] === param.value
)
return
valMap[param.seriesName] = param.value
const value =
param.value != null
? param.value
.toString()
.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
: "-"
html += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10p
})
return `<div style="text-align:left">${html}</div>`
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: _this.dateList,
axisLabel: {
fontSize: 10, // 这里设置字体大小
// x轴的文本颜色
textStyle: {
color: '#fff', // 这里就是颜色
},
},
axisTick: {
show: false,
},
axisLine: {
show: false, // X轴 网格线 颜色类型的修改
lineStyle: {
color: '#94B8DC',
},
},
splitLine: {
show: false, // X轴线 颜色类型的修改
lineStyle: {
color: '#94B8DC',
},
},
axisLabel: {
interval: 0,
rotate: 30, //倾斜的程度
fontSize: 10, // 这里设置字体大小
// x轴的文本颜色
textStyle: {
color: '#fff', // 这里就是颜色
},
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff',
},
},
name:'',
left:10,
axisTick: {
inside: false,
},
min: 0,
splitLine: {
show: false, // X轴线 颜色类型的修改
lineStyle: {
color: '#94B8DC',
},
},
},
],
series: [
{
name: '实际',
type: 'line',
itemStyle: {
color: '#38c8a8',
},
showSymbol: false,
smooth: true,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(17, 45, 55)',
},
{
offset: 1,
color: 'rgba(12, 62, 96,0.2)',
},
]),
},
data:_this.historyList,
},
{
name: '预测',
type: 'line',
itemStyle: {
color: '#38c8a8',
},
showSymbol: false,
smooth: true,
lineStyle: {
width: 2,
type: "dotted"
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(17, 45, 55)',
},
{
offset: 1,
color: 'rgba(12, 62, 96,0.2)',
},
]),
},
data:_this.futureList,
},
],
};