This is a comprehensive step-by-step tutorial on how to visualize data with ECharts. Special thinks to Wenhe Li for the help in website building.
Live Demo of a P2P default geomap: link
Installation & Setup
Install node.js
Please go to the download page of the official website and follow the instructions.
Install ECharts
First, make a new directory where you want to put your visualization in.
mkdir echarts-vis
cd echarts-vis
Second, make a new file called package.json and copy the following in the file. Please ignore the meaning for now if you don’t understand what this does. Save and close the file.
{
"scripts": {
"start": "npx parcel index.html"
}
}
Third, run the following command
npm install --save echarts
npm install --save-dev parcel
Build Your First Visualization: Bar
This section will walk you through a simple bar graph.
Prepare html file
Create a new file index.html. Copy the following content inside
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="index.js"></script>
</body>
</html>
Prepare js file
Create a new file index.js
import * as echarts from "echarts";
// based on the prepared dom, initiate an echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify configuration and data
var option = {
title: {
text: 'ECharts Demo'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["Shirts","Cardigan","Sweater","Pants","High Heels","Socks"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// Use the config and data set above to show the graph
myChart.setOption(option);
Build
Please run
npm run start
Wait a few moments and you should see
You can can open http://localhost:1234 and play with the interaction.