ECharts de Baidu
Est-ce que quelqu'un connaît un exemple d'Echarts ( http://echarts.baidu.com ) qui:
- N'utilise que des caractères anglais
- Importe correctement tous les éléments d'inclusion nécessaires à partir d'une structure de répertoire locale
- Travaux
Tous les exemples d'Echarts sont très bien présentés, mais aucun exemple ne montre comment le déployer et le faire fonctionner localement (en anglais) qui (et c'est assez important) fonctionne réellement.
Grâce à mes nombreux efforts de copier-coller puis d’édition, j’obtiens des messages sans fin de fichiers sans fin et des personnages mystérieux un peu partout (pour être honnête, il s’agit de caractères chinois, mais je ne les vois que comme des gribouillis mystérieux). J'ai également téléchargé les sampes github et recherché sur Google, mais sans succès.
La bibliothèque a l'air absolument géniale mais je ne parviens pas à la déchiffrer :(
Un seul exemple de page .jsp en anglais (qui fonctionne) serait bien. Quelqu'un sait où je peux en trouver un?
Merci
Voici un exemple qui fonctionne simplement. Il suffit de l'enregistrer dans un fichier HTML et de le rendre dans votre navigateur. Pas besoin de télécharger ou de configurer autre chose. Il utilise un fichier de script distant, et pas de texte chinois:
<!doctype html>
<html>
<head>
<title>ECharts Sample</title>
<script src="http://echarts.baidu.com/dist/echarts.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>Je sais qu'il y a déjà une réponse acceptée, mais j'ai pensé ajouter un lien pour les lecteurs de cette question.
La nouvelle version de la documentation echarts (echarts 3.4.0 au moment de sa rédaction) a été convertie en anglais.
Ils ont toute la documentation, y compris les options, le code API, les téléchargements et de nombreux exemples, tous en anglais (avec une zone de développement de type codepen permettant de tester vos options et de voir les résultats en temps réel).
La page d'entrée peut être trouvée ici:
https://ecomfe.github.io/echarts-doc/public/en/
La bibliothèque peut être téléchargée ici:
https://ecomfe.github.io/echarts-doc/public/en/download.html
Le tutoriel de démarrage peut être trouvé ici:
ecomfe.github.io/echarts-doc/public/en/tutorial.html
La multitude d'options peut être trouvée ici:
ecomfe.github.io/echarts-doc/public/en/option.html
Une multitude d'exemples peuvent être trouvés ici:
ecomfe.github.io/echarts-examples/public/index.html
Vous trouverez un exemple de graphique à barres simple et leur code codé ici: Ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align
Ci-dessous, j'ai collé leur diagramme à barres simple dans la fenêtre pour votre plus grand plaisir:
<!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>Il y a un exemple dans leur github qui explique clairement la façon d’utiliser le graphique Je viens de le tester, cela fonctionne très bien
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts-all.js-->
<!--Step:2 引入echarts-all.js-->
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
// --- 地图 ---
var myChart2 = echarts.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'广东',selected:true}
]
}
]
});
</script>
</body>
</html>
Les développeurs cherchent toujours la version anglaise d'echarts, le lien cdn ci-dessous contient des liens vers la version anglaise:
https://cdnjs.com/libraries/echarts
Fonctionne bien pour moi.
ECharts propose une version anglaise de leur site, comprenant des exemples et de la documentation, que je suppose que vous n’avez pas vue en fonction de votre question.
https://ecomfe.github.io/echarts/index-en.html
(Au moment de cette modification, ils doivent mettre à jour leurs documents en anglais vers la version 3.0 d’echarts).
https://ecomfe.github.io/echarts/doc/example-en.html
Cela étant dit, vous voudrez peut-être que l'intégralité du fichier .js et de ses chaînes par défaut soient en anglais, mais Google Translate peut y contribuer.
Si quelqu'un se demande. Quelqu'un a traduit l'intégralité de leur fichier .js en anglais, de sorte que les boutons et les commandes apparaissent en anglais. Ce gars leur a également demandé de fusionner sa version anglaise pour maîtriser github, mais je suppose qu'ils ne sont pas encore intéressés.
J'ai testé son fichier js et il est en anglais. Le lien vers le fichier Zip y est également inclus. Mais juste au cas où il pourrait être trouvé ici - Télécharger
https://github.com/ecomfe/echarts/issues/2321
Les données sont affichées en chinois, la structure du code et la structure en anglais. Ignorez les données spécifiques, essayez de mettre quelques données que vous voulez montrer.
démon en anglais: http://echarts.baidu.com/echarts2/doc/example-en.html