样式:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>曲线形式的统计图示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
<div id="curve" style="width: 100%;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('curve'));
var option = {
title: {
text: '曲线形式的统计图',
textAlign: "left" //主副标题文本水平对齐方式,可选值为’left’, ‘center’, ‘right’。
},
tooltip: {
trigger: 'axis', //提示框触发类型'item'(数据项触发)'axis'(坐标轴触发)'none'(不触发)
},
legend: {
data: ['销量'],
},
/*下载功能*/
toolbox: {
feature: {
saveAsImage: {}
},
padding: [0, 15, 0, 0]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
/*数据点颜色 and 面积颜色*/
color: ['DeepSkyBlue', 'HotPink', 'LawnGreen', 'Gold',], //color[0]对应series[0] 深蓝色
/*X轴*/
xAxis: {
type: 'category',
/*x轴数据从原点开始*/
boundaryGap: false, //默认true
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'],
axisLabel: {
show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle: { //textStyle里面写y轴下的字体的样式
color: '#333',
fontSize: 13
}
},
},
/*Y轴*/
yAxis: {
/*y轴是否从最小值开始*/
scale: false, // false从0开始
/*是否显示y轴*/
show: true, //true显示 默认true
/*坐标轴类型*/
type: 'value', //’value’(数值轴)、‘category’(类目轴)、‘time’(时间轴)、‘log’(对数轴)
/*轴线属性*/
axisLine: {
/*y轴竖线*/
show: true, //true显示 默认false
lineStyle: {
color: 'rgb(110, 112, 121)', //改变y轴颜色
width: 2, // y轴粗细
//Y轴上下宽度像素不一致,暂不知道解决方法
},
},
},
/*数据系列*/
series: [
{
name: '设备数:',
type: 'line', // 'line'(折线图)、'bar'(柱状图)、'pie'(饼图)
smooth: true, // true开启曲线
showSymbol: false, // false关闭数据点
endLabel: {
show: false, // true只显示折线图最后一个数据
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
/*折线下方面积渐变*/
areaStyle: {
opacity: 1.2,
color: new echarts.graphic.LinearGradient( //渐变色
0, 0, 0, 1,
[ //0->1渐变
{
offset: 0,
color: 'rgb(193, 228, 249)'
},
{
offset: 1,
color: 'rgb(255, 255, 255)'
}
])
},
lineStyle: { // 折线颜色
normal: {
color: "rgb(4, 148, 250)", // 折线颜色
width: 2 // 折线宽度
}
},
},
//其他数据图
{}
]
};
/*数据渲染*/
console.log(option.series[0].data);
/*方法自调用*/
myChart.setOption(option);
</script>
</html>