Does anyone know of an Echarts (http://echarts.baidu.com) example that:
- Only uses english characters
- Correctly imports all the necessary includes from a local directory structure
- Works
All the Echarts examples are presented very nicely but there are no examples that show how to deploy and run it locally (in English) that (and this is rather important) actually work.
From my many 'copy and paste' then edit efforts I just get endless file not found messages and mysterious characters all over the place (to be fair they are Chinese characters but I only see them as mysterious squiggles). I've also downloaded the github sampes and searched Google but with no success.
The library looks absolutely brilliant but I can't decipher it :(
A single .jsp page example in English (that works) would be great. Anyone know where I can find one?
Thanks
Answer
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>