html代码
<div ref="xunjianip" style="width: 100%;height: 250px;"></div>
就是代码
getEchars(timeList,dataList) {
var myChart = echarts.init(this.$refs.xunjianip);
//let xLabel = ['1秒', '2秒', '3秒', '4秒', '5秒', '6秒', '7秒'];
let xLabel=timeList
let dataValues = dataList
let series = []
let dataValue2 = [610, 565, 540, 770]; //实际
console.log(new Array(dataValue2.length - 1).fill('-'),'====new Array(dataValue2.length - 1)')
let dataValue3 = [...new Array(dataValue2.length - 1).fill('-'), dataValue2[dataValue2.length - 1], 720,1000];
let dataValue = [510, 465, 440, 570];
let dataValue1 = [...new Array(dataValue.length - 1).fill('-'), dataValue[dataValue.length - 1], 670,1500];
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: 'rgb(126,199,255)',
}
}
},
// legend: {
// show: true,
// top: '10%',
// data: ['实际', '预测'],
// itemWidth: 30,
// itemHeight: 10,
// textStyle: {
// color: '#fff',
// fontSize: 12,
// padding: [0, 8, 0, 8]
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#ffffff',
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: '#FFFFFF',
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#233653',
},
},
axisTick: {
show: false,
},
data: xLabel,
},
],
yAxis: [
{
name: "",
nameTextStyle: {
color: "#fff",
fontSize: 12,
padding: [0, 60, 0, 0]
},
// minInterval: 1,
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#1160a0',
type: 'dashed'
},
},
axisLine: {
show: true,
lineStyle: {
color: '#ffffff',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
},
],
series: [
{
name: '实际',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth:true,
lineStyle: {
normal: {
width: 3,
color: '#3BA272', // 线条颜色
},
},
itemStyle: {
normal: {
color: '#3BA272',//拐点颜色
label: {
show: true, //开启显示
color: '#fff',
position: 'top', //在上方显示
formatter: function (res) {
if (res.value) {
return res.value
} else {
return 0
}
},
},
},
},
symbolSize: 8, //设定实心点的大小
data: dataValue2,
},
{
name: '实际',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
lineStyle: {
normal: {
width: 3,
color: '#ffba00', // 线条颜色
},
},
itemStyle: {
normal: {
color: '#FAC858',//拐点颜色
label: {
show: true, //开启显示
color: '#fff',
position: 'top', //在上方显示
formatter: function (res) {
if (res.value) {
return res.value
} else {
return 0
}
},
},
lineStyle: {
type: 'dotted'
}
},
},
symbolSize: 8, //设定实心点的大小
data: dataValue3,
},
{
name: '预测',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth:true,
lineStyle: {
normal: {
width: 3,
color: '#5470C6', // 线条颜色
},
},
itemStyle: {
normal: {
color: '#00f0ff',//拐点颜色
// borderColor: '#fff600',//拐点边框颜色
// borderWidth: 13//拐点边框大小
label: {
show: true, //开启显示
color: '#fff',
position: 'top', //在上方显示
formatter: function (res) {
if (res.value) {
return res.value
} else {
return 0
}
},
},
},
},
symbolSize: 8, //设定实心点的大小
data: dataValue,
},
{
name: '预测',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth:true,
lineStyle: {
normal: {
width: 3,
color: '#ffba00', // 线条颜色
},
},
itemStyle: {
normal: {
color: '#FAC858',//拐点颜色
label: {
show: true, //开启显示
color: '#fff',
position: 'top', //在上方显示
formatter: function (res) {
if (res.value) {
return res.value
} else {
return 0
}
},
},
lineStyle: {
type: 'dotted'
}
},
},
symbolSize: 8, //设定实心点的大小
data: dataValue1,
}
]
}
myChart.setOption(option);
}
上一篇：
vue清除echars遗留的历史数据
