javascript - 来自百度的ECharts

标签 javascript charts echarts

有谁知道 Echarts ( http://echarts.baidu.com ) 示例:

  • 只使用英文字符
  • 从本地目录结构中正确导入所有必要的包含
  • 作品

所有 Echarts 示例都很好地呈现,但没有示例显示如何在本地(英文)部署和运行它(这很重要)实际有效。

从我的许多“复制和粘贴”然后编辑工作中,我只是得到无穷无尽的文件未找到消息和到处都是神秘字符(公平地说,它们是汉字,但我只看到它们是神秘的波浪线)。我也下载了 github sampes 并搜索了谷歌但没有成功。

图书馆看起来非常棒,但我无法破译它:(

一个英文的 .jsp 页面示例(有效)会很棒。谁知道我在哪里可以找到它?

谢谢

最佳答案

我知道已经有一个公认的答案,但我想我会为阅读这个问题的人添加一个链接。

新版本的 echarts 文档(撰写本文时为 echarts 3.4.0)已转换为英文。

他们有所有文档,包括选项、API 代码、下载和许多全英文的示例(有一个代码笔类型的开发区域,您可以测试您的选项并实时查看结果)。

入口页面可以在这里找到:
https://ecomfe.github.io/echarts-doc/public/en/

库可以在这里下载:
https://ecomfe.github.io/echarts-doc/public/en/download.html

入门教程可以在这里找到:
ecomfe.github.io/echarts-doc/public/en/tutorial.html

可在此处找到众多选项:
ecomfe.github.io/echarts-doc/public/en/option.html

这里有大量的例子:
ecomfe.github.io/echarts-examples/public/index.html

可以在此处找到一个简单的条形图示例及其代码笔 Playground : ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align

下面我将他们的简单条形图粘贴到窗口中以供您查看:

<!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>

关于javascript - 来自百度的ECharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27930030/

相关文章:

javascript - ECharts:禁用图例上的默认点击操作

javascript - 为什么我对两个选择器的比较永远不起作用?

JavaScript 否定先行正则表达式产生错误结果

excel - 在 Excel VBA 中确定一个点的值

.net - F# 中的跨平台实时图表

javascript - Canvas 不是由ReactEcharts创建的

javascript - 为什么我不通过 javascript 从 Object.key 获取值

javascript - html 中的 JScript 未运行或未被调用

api - 带有 CSV 数据的 Google 可视化

javascript - 如何在轴线(x 轴)处显示数据(传递给图表的数组)的最后一个值?