var myChart = echarts.init(document.getElementById('id'));
setEchart4();
/*租赁图*/
function setEchart4(){
// 指定图表的配置项和数据
var option = {
grid: { //图表绘制与上下左右的距离
left: '5%',
right: '5%',
bottom: '10%',
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
return "日期:" + params[0].name + ":00<br/>" +
"资产原值:" + params[0].value + "Km/h<br/>";
},
axisPointer: {
type: 'line',
lineStyle: {
color: "#5793f3",
width: 2,
type: 'dashed'
}
},
backgroundColor: 'rgba(16,75,136,.5)',
borderColor: "rgba(50,243,255,1)",
borderWidth: 1,
},
xAxis: {//x轴
min:0, // 设置x轴刻度的最小值
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{//坐标轴线
show:true,
lineStyle:{
color:'rgba(29, 32, 136, 1)'
}
},
axisTick:{//坐标轴线是否向内
inside:false,
lineStyle:{
color:'rgba(0, 160, 233, 1)'
}
},
axisLabel:{//坐标轴刻度设置
color:'rgba(40, 40, 40, 1)'
},
},
yAxis: {
min:0, // 设置y轴刻度的最小值
type: 'value',
axisLine:{
show:true,
lineStyle:{
color:'rgba(0, 160, 233, 1)'
}
},
axisTick:{//坐标轴线是否向内
inside:true,
lineStyle:{
color:'rgba(0, 160, 233, 1)'
}
},
axisLabel:{//坐标轴刻度设置
color:'rgba(40, 40, 40, 1)'
},
splitLine:{show: false},//去除网格线
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth:false,//是否平滑曲线显示。
symbol: 'circle',//标记的图形。
symbolSize: 4,//标记的大小
itemStyle: {//图像标记颜色 修改颜色时symbol、symbolSize需要进行设置
normal: {
color: 'rgba(0, 192, 255, 1)',
borderColor: 'rgba(29,32,136,1)',
borderWidth: 1,
borderType: 'solid',
shadowColor: 'rgba(29,32,136,1)',
shadowBlur: 4,
},
},
lineStyle:{//折线线条颜色
normal:{
color:'rgba(29, 32, 136, 1)'
}
},
areaStyle: {//图表覆盖颜色设置
normal: {
borderColor: 'rgba(29,32,136,1)',
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(180, 0, 255, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 192, 255, 1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//图表根据窗口大小显示
$(window).resize(myChart.resize);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js" type="text/javascript" charset="utf-8"></script>
结果截图: