【Echarts】详解 折线图/面积图！！！快来看看吧！！
转自于：https://blog.csdn.net/weixin_43352901/article/details/108489921
折线图/面积图 的实现
先看效果
文件目录
获取Echarts
引入Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>
绘制图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
<body style="background: black;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 835px; height: 670px"></div>
</body>
- 1
- 2
- 3
- 4
然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个 折线图/面积图
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
</script>
代码步骤拆分
var option = {} // 指定图标的配置和数据
数据源
// 数据集
var dataList = [
{date: '08/01', value: 16},
{date: '08/02', value: 56},
{date: '08/03', value: 46},
{date: '08/04', value: 11},
{date: '08/05', value: 116},
{date: '08/06', value: 146},
{date: '08/07', value: 116},
{date: '08/08', value: 56},
{date: '08/09', value: 36},
{date: '08/10', value: 129},
{date: '08/11', value: 145},
{date: '08/12', value: 115},
{date: '08/13', value: 105},
{date: '08/14', value: 45},
{date: '08/15', value: 87},
{date: '08/16', value: 82},
{date: '08/17', value: 24},
{date: '08/18', value: 78},
{date: '08/19', value: 56},
{date: '08/20', value: 52},
{date: '08/21', value: 78},
{date: '08/26', value: 123},
{date: '08/31', value: 130}
]
var xKeys = dataList.map((item) => item.date);
var values = dataList.map((item) => item.value);
title
title: {
text: '球队近30日盈利情况',
show: true,
textStyle: {
color: '#fff',
fontSize: '36',
fontFamily: 'Microsoft YaHei',
fontWeight: 400
},
top: '42',
left: '40'
}
legend (配合series才会显示)
legend: {
top: 150,
right: 0,
z: 4,
textStyle: {
fontSize: "24px",
fontFamily:
"Microsoft YaHei",
fontWeight: 400,
color: "#c2cbf2",
},
}
grid
grid: {
left: 70,
top: 200,
right: 40,
bottom: 80
}
xAxis（直角坐标系 grid 中的 x 轴）
xAxis: [
{
type: 'category',
data: xKeys,
color:'#323e52',
axisLabel: {
margin: 20,
interval: 'auto',
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
textAlign: 'center',
color: '#c2cbf2'
}
},
position: 'bottom',
axisLine: {
lineStyle: {
color: '#b7ccff',
type: 'solid'
}
},
splitLine: {
show: false
}
}
]
yAxis（直角坐标系 grid 中的 y 轴）
yAxis: {
type: 'value',
silent: true,
interval: 30,
min: 0,
max: 150,
axisLabel: {
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
textAlign: 'right',
color: '#c2cbf2'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#232842',
type: 'solid'
}
}
}
series（系列列表。每个系列通过 type 决定自己的图表类型）
series: [
{
name: '盈利资金(万)',
type: 'line', // 折现/面积图
data: values,
itemStyle: {
color: '#24def3'
},
symbol: 'emptyCircle', // 几何圆
symbolSize: 10,
areaStyle: { // 区域填充样式
color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#25eaff', // 0% 处的颜色
},
{
offset: 1,
color: '#121f35' // 100% 处的颜色
}
],
global: false, // 缺省为 false
}
},
xAxisIndex: 0
}
]
修改部分问题（bug）
示例: 问题一
grid: {
left: 'auto',
top: 346,
right: 'auto',
containLabel:true,
bottom: 20,
},
//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签
示例: 问题二
yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住
- 1
