echartsdemo资源-CSDN文库

共4个文件

html：2个

js：1个

rar：1个

需积分: 10 184 浏览量 2018-01-23 09:35:03 上传评论收藏 1017KB RAR 举报

ECharts 是一个基于 JavaScript 的数据可视化库，广泛应用于 Web 开发中，特别是在数据分析和信息展示领域。这个压缩包文件“echarts demo”包含了与 ECharts 相关的帮助文档和示例，旨在帮助开发者更好地理解和使用 ECharts。我们看到有两个 HTML 示例文件：`doc-example-tutorial-async.html` 和 `doc-example-getting-started.html`。这些文件通常是 ECharts 示例教程的一部分，用于演示如何在网页中集成 ECharts 图表，并展示异步数据加载（对于 `doc-example-tutorial-async.html`）以及基础的图表创建步骤（`doc-example-getting-started.html`）。通过查看这些文件，开发者可以学习如何配置 ECharts 实例，设置图表的属性，以及如何处理和展示数据。 `echarts.js` 文件是 ECharts 的核心库文件，包含了所有 ECharts 的功能和图表类型。开发者需要在网页中引入这个文件，才能使用 ECharts 提供的各种图表，如折线图、柱状图、饼图、散点图等。ECharts 支持丰富的交互功能，如缩放、平移、刷选，以及自定义图例、标题、数据项等，为数据可视化提供了极大的灵活性。 `JScript.rar` 文件则可能包含了一些 JavaScript 相关的资源或文档，尽管它没有明确提及 ECharts，但 JavaScript 是 ECharts 工作的基础，因此可能提供了一些关于 JavaScript 编程或与 ECharts 集成相关的辅助材料。JavaScript 是一种广泛使用的客户端脚本语言，用于控制网页的行为，与 ECharts 结合可以实现动态的数据更新和用户交互。这个压缩包为 ECharts 的初学者和进阶用户提供了宝贵的资源。通过学习和实践其中的示例，开发者可以掌握如何利用 ECharts 创建出美观且功能强大的数据可视化界面。同时，了解 JavaScript 的基本语法和操作也至关重要，因为它是驱动 ECharts 运行的关键。对于 Web 开发者来说，熟悉 ECharts 和 JavaScript 能够提升他们在数据分析和前端开发领域的专业技能。

资源推荐

资源详情

资源评论

收起资源包目录

echarts.rar （4个子文件）

doc-example-getting-started.html 2KB

doc-example-tutorial-async.html 3KB

echarts.js 2.26MB

JScript.rar 583KB

<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <input type="button" id="btn1" value="test" onClick="testSync();" /> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts/echart.min.js"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts-gl/echart-gl.min.js"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://www.echartsjs.com/gallery/vendors/simplex.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; function fetchData(cb) { // 通过 setTimeout 模拟异步加载 setTimeout(function () { cb({ categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], data: [5, 20, 36, 10, 10, 20] }); }, 1000); } // 初始 option option = { title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }; myChart.on('click', function (params) { // 控制台打印数据的名称 console.log(params.name); }); fetchData(function (data) { console.info(data); myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] }); });; if (option && typeof option === "object") { myChart.setOption(option, true); } function testSync(){ var mydata = { categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], data: [5, 20, 36, 10, 10, 20] }; myChart.setOption({ xAxis: { data: mydata.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量111', data: mydata.data }] }); } </script> </body> </html>

评论收藏

内容反馈