来自百度的 ECharts
[英]ECharts from Baidu
问题描述
Does anyone know of an Echarts ( http://echarts.baidu.com ) example that:
有谁知道 Echarts ( http://echarts.baidu.com ) 的例子：
- 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.所有 Echarts 示例都非常好地呈现，但没有示例显示如何在本地（英语）部署和运行它（这很重要）实际工作。
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.我也下载了 github sampes 并搜索了谷歌，但没有成功。
The library looks absolutely brilliant but I can't decipher it :(图书馆看起来非常棒，但我无法破译它:(
A single .jsp page example in English (that works) would be great.一个单独的 .jsp 英文页面示例（有效）会很棒。 Anyone know where I can find one?有谁知道我在哪里可以找到一个？
Thanks谢谢
8 个解决方案
解决方案1
14 2017-01-18 21:22:18
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. echarts 文档的新版本（撰写本文时为 echarts 3.4.0）已转换为英文。
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).他们拥有所有文档，包括选项、api 代码、下载和许多英文示例（带有 codepen 类型的开发区域，您可以测试您的选项并实时查看结果）。
The entry page can be found here:入口页面可以在这里找到：
https://ecomfe.github.io/echarts-doc/public/en/ https://ecomfe.github.io/echarts-doc/public/en/
The library can be downloaded here:该库可以在这里下载：
https://ecomfe.github.io/echarts-doc/public/en/download.htmlhttps://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 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 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 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一个简单的条形图示例及其 codepen 操场可以在这里找到：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>
解决方案2
12 已采纳 2016-10-07 00:50:16
Here is an example that simply works.这是一个简单有效的示例。 Just save it into an HTML file and render it into your browser.只需将其保存到 HTML 文件中，然后将其呈现到您的浏览器中即可。 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>
解决方案3
6 2015-01-18 14:29:54
There is an example in their github that clearly explain the way of using the chart i just test it, it's working very well他们的github中有一个例子清楚地解释了使用图表的方式我只是测试它，它工作得很好
echart Example on github github 上的 echart 示例
<!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>
解决方案4
5 2017-10-02 19:29:29
Just incase devs are still looking for the english version of echarts, the cdn link below has links to the english version:以防万一开发人员仍在寻找英文版的 echarts，下面的 cdn 链接有英文版的链接：
https://cdnjs.com/libraries/echarts https://cdnjs.com/libraries/echarts
Works fine for me.对我来说很好用。
解决方案5
4 2015-02-26 18:25:43
ECharts does offer an English version of their site, including examples and documentation, which I am guessing you did not see based on your question. ECharts 确实提供了他们网站的英文版本，包括示例和文档，根据您的问题，我猜您没有看到。
https://ecomfe.github.io/echarts/index-en.html https://ecomfe.github.io/echarts/index-en.html
(At the time of this edit, they need to update their english docs to the 3.0 version of echarts). （在此编辑时，他们需要将他们的英文文档更新为 echarts 3.0 版本）。
https://ecomfe.github.io/echarts/doc/example-en.html https://ecomfe.github.io/echarts/doc/example-en.html
That being said, there are still times when you wish the entire .js and its default strings were in English, but Google Translate can help there.话虽如此，有时您仍希望整个 .js 及其默认字符串都是英文的，但 Google 翻译可以提供帮助。
解决方案6
2 2017-04-30 22:42:09
If anyone is wondering.如果有人想知道。 Someone did translate their entire .js to english, so that the buttons and controls appear in English.有人确实将他们的整个 .js 翻译成英文，以便按钮和控件以英文显示。 This guy also requested them to merge his 'English' version to master on github, but I guess they aren't interested yet.这家伙还要求他们将他的“英文”版本合并到 github 上，但我猜他们还不感兴趣。
I have tested his js file and it is in English.我已经测试了他的 js 文件，它是英文的。 The link to the zip file is also included there. zip 文件的链接也包含在那里。 But just in case it can be found here - Download但以防万一它可以在这里找到 - 下载
https://github.com/ecomfe/echarts/issues/2321 https://github.com/ecomfe/echarts/issues/2321
解决方案7
0 2016-08-19 18:04:38
The data is displayed in Chinese,Code structure and framework in English.Ignore the specific data,try to put some data what you want to show.数据显示为中文，代码结构和框架为英文。忽略具体数据，尽量放一些你想显示的数据。
demon in english: http://echarts.baidu.com/echarts2/doc/example-en.html英文恶魔： http : //echarts.baidu.com/echarts2/doc/example-en.html
解决方案8
0 2019-04-11 05:25:25
If someone is using echarts-for-react, here is how I solved it如果有人使用 echarts-for-react，我是这样解决的
toolbox: {
show: true,
orient: 'vertical',
feature: {
dataView: { show: true, title: 'Data View', readOnly: false },
restore: { show: true, title: 'Reset' },
saveAsImage: { show: true, title: "Download" }
},
}
the magic lies in the toolbox.feature.title神奇之处在于 toolbox.feature.title
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.