ECharts from Baidu
I know there is already an accepted answer, but I thought I would add a link for people reading this question.
The new version of the echarts documentation (echarts 3.4.0 as of writing this) has been converted into english.
They have all the documentation including options, the api code, downloads, and many examples all in english (with a codepen type development area that you can test out your options and see the results in real time).
The entry page can be found here:
https://ecomfe.github.io/echarts-doc/public/en/
The library can be downloaded here:
https://ecomfe.github.io/echarts-doc/public/en/download.html
The getting started tutorial can be found here:
ecomfe.github.io/echarts-doc/public/en/tutorial.html
The multitude of options can be found here:
ecomfe.github.io/echarts-doc/public/en/option.html
A plethora of examples can be found here:
ecomfe.github.io/echarts-examples/public/index.html
An simple bar chart example and their codepen playground can be found here: ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align
Below I have pasted their simple bar chart into the window for your viewing pleasure:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 250px;"></div>
<script type="text/javascript">
var chart = document.getElementById("container");
var myChart = echarts.init(chart);
var option = {
title: {
text: "Echarts Bar Chart"
},
legend: [
{
data: ["Hours Worked"]
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name:'Hours Worked',
type:'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option, true);
</script>
</body>
</html>Here is an example that simply works. Just save it into an HTML file and render it into your browser. No need to download or configure anything else. It uses a remote script file, and no Chinese text:
<!doctype html>
<html>
<head>
<title>ECharts Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts-en.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 350px;"></div>
<script>
var chart = document.getElementById('chart');
var myChart = echarts.init(chart);
var option = {
title: { text: 'ECharts Sample' },
tooltip: { },
legend: { data: [ 'Sales' ] },
xAxis: { data: [ "shirt", "cardign", "chiffon shirt", "pants", "heels", "socks" ] },
yAxis: { },
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>
</body>
</html>