堆叠区域图 的实现
先看效果
文件目录
获取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: 1710px; height: 670px"></div>
</body>
然后就可以通过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: 116, timeNum: 14},
{
date: '08/02', value: 256, timeNum: 14},
{
date: '08/03', value: 446, timeNum: 25},
{
date: '08/04', value: 520, timeNum: 54},
{
date: '08/05', value: 480, timeNum: 87},
{
date: '08/06', value: 446, timeNum: 48},
{
date: '08/07', value: 516, timeNum: 75},
{
date: '08/08', value: 350, timeNum: 45},
{
date: '08/09', value: 570, timeNum: 41},
{
date: '08/10', value: 400, timeNum: 64},
{
date: '08/11', value: 350, timeNum: 14},
{
date: '08/12', value: 305, timeNum: 35},
{
date: '08/13', value: 405, timeNum: 45},
{
date: '08/14', value: 320, timeNum: 14},
{
date: '08/15', value: 450, timeNum: 74},
{
date: '08/16', value: 550, timeNum: 94},
{
date: '08/17', value: 478, timeNum: 64},
{
date: '08/18', value: 256, timeNum: 15},
{
date: '08/19', value: 352, timeNum: 54},
{
date: '08/20', value: 178, timeNum: 25},
{
date: '08/21', value: 178, timeNum: 25},
{
date: '08/22', value: 178, timeNum: 25},
{
date: '08/23', value: 178, timeNum: 25},
{
date: '08/24', value: 178, timeNum: 25},
{
date: '08/25', value: 178, timeNum: 25},
{
date: '08/26', value: 178, timeNum: 25},
{
date: '08/27', value: 178, timeNum: 25},
{
date: '08/28', value: 178, timeNum: 25},
{
date: '08/29', value: 300, timeNum: 45},
{
date: '08/30', value: 300, timeNum: 45},
{
date: '08/31', value: 300, timeNum: 14}
]
var xKeys = dataList.map((item) => item.date);
var values = dataList.map((item) => item.value);
var timesList = dataList.map((item) => item.timeNum);
title
title: {
text: '球员活跃数据',
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
}
tooltip（提示框）
tooltip: {
// 提示框
trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {
// 坐标轴指示器配置项
type: 'cross', // 十字准星指示器
label: {
backgroundColor: '#6a7985'
}
}
}
tooltip具体属性请看：https://echarts.apache.org/zh/option.html#tooltip
xAxis（直角坐标系 grid 中的 x 轴）
xAxis: [
{
type: "category",
color: "#323E52",
data: xKeys,
axisLabel: {
margin: 20,
interval:'auto',
textStyle: {
fontSize: 24,
fontFamily:
"Source Han Sans CN Regular, Source Han Sans CN Regular-Regular",
fontWeight: 400,
textAlign: "center",
color: "#c2cbf2",
},
},
axisLine: {
lineStyle: {
color: "#b7ccff",
type: "solid",
},
},
splitLine: {
show: false,
},
},
]
yAxis（直角坐标系 grid 中的 y 轴）
yAxis: [
{
type: 'value',
silent: true,
interval: 100,
min: 0,
max: 600,
axisLabel: {
textStyle: {
fontSize: 24,
fontFamily:
"Source Han Sans CN Regular, Source Han Sans CN Regular-Regular",
fontWeight: 400,
textAlign: "right",
color: "#6482FF",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#232842",
type: "solid",
},
},
},
{
type: 'value',
position: "right",
silent: true,
interval: 20,
min: 0,
max: 120,
axisLabel: {
textStyle: {
fontSize: 24,
fontFamily:
"Source Han Sans CN Regular, Source Han Sans CN Regular-Regular",
fontWeight: 400,
textAlign: "right",
color: "#24DEF3",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
]
series（系列列表。每个系列通过 type 决定自己的图表类型）
- 对象一
{
name:'球员活跃数',
type: "line",
data: values,
itemStyle: {
color: "#6482FF"
},
symbol: 'circle', // 转折点为实心圆
symbolSize: 10,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, // 顶部颜色
color: '#6482FF'
},
{
offset: 1,
color: '#121f35' // 底部颜色
}
],
global: false
}
},
hoverAnimation:true
}
- 对象二
{
name:'到场次数',
type: 'line',
data: timesList,
itemStyle:{
color: "#24DEF3"
},
symbol: 'circle',
symbolSize: 10,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#24DEF3'
},
{
offset: 1,
color: '#121f35'
}
],
global: false
}
},
yAxisIndex: 1,
hoverAnimation:true
}
注意，当有两个y轴时候，用的上下面的属性！！！
当没有使用上面的属性时！！！数据不对应！！！
修改部分问题（bug）
示例: 问题一
grid: {
left: 'auto',
top: 346,
right: 'auto',
containLabel:true,
bottom: 20,
},
//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签
示例: 问题二
yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住
