Skip to content

Instantly share code, notes, and snippets.

@dennyferd

dennyferd/index.html

Created June 17, 2022 06:17
Show Gist options
  • Save dennyferd/d2db3cdeed16db5c036955561d737553 to your computer and use it in GitHub Desktop.
Save dennyferd/d2db3cdeed16db5c036955561d737553 to your computer and use it in GitHub Desktop.
Download ZIP
World Population - Apache ECharts Demo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>World Population - Apache ECharts Demo</title>
</head>
<body>
<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</body>
</html>
Raw
script.js
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2013',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
Raw
style.css
* {
margin: 0;
padding: 0;
}
#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}
Raw
world-population-apache-echarts-demo.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment