HTML:
<div style="height: 210px;">
<div id="line" style="height: 100%;padding: 15px;"></div>
</div>
JS:
var line = document.getElementById("line");
var myChartline = echarts.init(line);
optionLine = {
title: {
text: '最高技术出力',
color: "#333333",
x: "center",
y: "top",
},
textStyle: {
color: "#999999"
},
grid: {
left: "40",
top: '50',
right: '20',
bottom: '30'
},
tooltip: {
trigger: 'axis'
},
legend: {
show:false
},
xAxis: {
type: 'category',
splitLine: {
show: false,
lineStyle: {
color: ['#fff'],
width: 1,
type: 'solid'
}
},
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {
lineStyle: {
color: '#DDDDDD'
}
}
},
yAxis: {
axisTick: {
show: false
},
type: 'value',
axisLabel: {
formatter: '{value} °C'
},
splitLine: {
show: true,
lineStyle: {
color: ['#DDDDDD'],
width: 1,
type: 'solid'
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#DDDDDD',
width: '1'
}
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
symbolSize: 5,
showSymbol: false,
markPoint:{
label: {
show: true,
position: "top",
distance: 7,
offset: [1, 1],
color:'#fff',
lineHeight: 10,
padding: [8,10],
backgroundColor: { // 此处设置背景图
image: '${path}/static/home/images/biaozhu.png'
},
formatter: '{c}'
},
symbol: "circle",
symbolSize: 13,
symbolOffset: [0, 0],
color:'rgba(121, 199, 253, 1)',
data: [ {type: 'max', name: '最高气温'}, ],
},
itemStyle: {
normal: {
color: "rgba(121, 143, 253, 1)",
lineStyle: {
color: "rgba(121, 143, 253, 1)"
}
}
},
lineStyle: {
normal: {
width: 5,
color: { // 设置渐变线条
type: 'linear',
colorStops: [{
offset: 0,
color: 'rgba(121, 199, 253, 1)'
}, {
offset: 0.5,
color: 'rgba(121, 143, 253, 1)'
},{
offset: 1,
color: 'rgba(186, 121, 253, 1)'
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(238, 238, 238, 1)',
shadowBlur: 3,
shadowOffsetY: 20 // 此处设置凸出的偏移量
}
}
}
]
};
myChartline.setOption(optionLine);
就是这么简单