Implementation of Stacked Area Chart
Look at the effect first
File Directory
Get Echarts
Introduce 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>
Draw a chart
Before drawing, we need to prepare a DOM container with height and width for ECharts
<body style="background: black;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1710px; height: 670px"></div>
</body>
Then you can initialize an echarts instance through the echarts.init method and generate a stacked area map through the setOption method
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
</script>
Code step split
var option = {} // Specify the configuration and data of the icon
data source
// 数据集
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 (Only displayed in conjunction with 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 (tip box)
tooltip: {
// 提示框
trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {
// 坐标轴指示器配置项
type: 'cross', // 十字准星指示器
label: {
backgroundColor: '#6a7985'
}
}
}
Please see the specific properties of tooltip: https://echarts.apache.org/zh/option.html#tooltip
xAxis (the x axis in the rectangular coordinate system grid)
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 (the y axis in the rectangular coordinate system grid)
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 (series list. Each series determines its own chart type by type)
- Object one
{
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
}
- Object two
{
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
}
Note that when there are two y-axes, the upper and lower attributes are used! ! !
When the above attributes are not used! ! ! The data does not correspond! ! !
Modify some issues (bug)
Example: Question One
grid: {
left: 'auto',
top: 346,
right: 'auto',
containLabel:true,
bottom: 20,
},
//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签
Example: Question Two
yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住
