<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <div id="main" style="height:400px"></div> <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> <script type="text/javascript"> myChart(); function myChart() { // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); var categories = new Array(); var data = new Array(); //此处值可以从后台取,如 categories = ${category}; categories = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]; data = [5, 20, 40, 10, 10, 20]; var option = { tooltip: { show: true }, 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, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : categories } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data": data } ] }; // 为echarts对象加载数据 myChart.setOption(option); } //ajax设置图表 function changeChart(){ $.ajax({ url:url, dataType:"json", success:function(data){ var newOption = myChart.getOption(); // 深拷贝 newOption.xAxis[0].data = []; newOption.series[0].data = []; myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并 ); }); } </script> </body>
上面展示了从后台取值和从ajax改变图表的方式,旧版本,如果数据为空会报错,新版就不会
相关推荐
Echarts使用地图类型的组件时用到的js文件, 引入该文件可以使用ECharts Map,世界地图world.js
**ECharts 使用方法详解** ECharts 是一个由百度开发的,基于 JavaScript 的开源可视化图表库。它支持多种图表类型,如折线图、柱状图、饼图、散点图等,广泛应用于数据可视化的场景。ECharts 提供了丰富的交互功能...
下面我们将深入探讨ECharts的基本使用方法。 **一、安装与引入** 在开始使用ECharts前,首先需要下载或通过npm安装ECharts库。如果选择下载,可以从ECharts官网获取最新版本的压缩包,解压后在HTML文件中引入`...
在标题"**Echarts使用的JS库**"中提到的几个JavaScript文件是ECharts地图显示的必要组成部分。 1. **echarts.min.js**: 这是ECharts的核心库,包含了ECharts的所有功能。开发者可以通过这个文件在网页中引入ECharts...
在"百度echarts使用教程之折线图demo案例源码"这个压缩包中,包含了直接运行就能查看效果的代码,这对于初学者来说是很好的学习资源。 首先,我们要了解ECharts的基本结构。在HTML文件中,我们需要引入ECharts的库...
echarts 图表 jinja 模版 三、菜鸟实战 初始化 Flask 框架,设置路由 各行政区房屋均价柱状图分析 echarts 渲染柱状图 各面积区间房屋占比饼状图 echarts 渲染饼状图 运行结果 运行截图 数据示例
在这个压缩包中,"Echarts使用"可能包含了一些实战示例或扩展资料,帮助开发者解决这些问题。 首先,了解ECharts的基本使用方法是至关重要的。这包括在HTML中引入ECharts库,创建一个用于展示图表的DOM元素,然后...
ECharts使用心得 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个...
echarts3中如何使用timeline,官方的事例代码不是很容易看懂,所以写示例希望也能帮助你搞定timeline,原文地址 http://blog.csdn.net/kebi007/article/details/60882367
- `world.js`:这是Echarts使用的地理坐标系文件,包含了世界地图的数据,用于Echarts渲染地图。 - `echarts.min.js`:Echarts的核心库,提供图表绘制和数据处理功能。 - `vue.min.js`:Vue.js的压缩版库,用于...
"ECharts 使用demo"这个主题显然关注的是如何有效地利用ECharts进行数据可视化。下面我们将深入探讨ECharts的核心特性、基本使用方法以及一些常见图表类型的示例。 1. **ECharts核心特性**: - **跨浏览器支持**:...
二、ECharts使用示例 1. **引入ECharts**:在HTML文件中,通过`<script>`标签引入ECharts的JavaScript文件。你可以从CDN(内容分发网络)或者本地安装的ECharts目录中引入。例如: ```html <script src="path/to/...
**ECharts 使用实例详解** ECharts 是一个由百度开源的,基于 JavaScript 的数据可视化库,它提供了丰富的图表类型,精美的图表效果以及便捷的交互功能,适用于网页端的数据展示。在本资源中,我们将深入探讨如何...
echarts使用demo
博文《cesium结合echarts使用》所提及的文件
Echarts使用RequireJS来管理依赖关系和加载模块,因此需要在JSP页面中配置RequireJS。可以使用以下代码配置RequireJS: ```javascript require.config({ paths: { echarts: '<genesis:base/>/js/echarts', '...
echarts中使用天地图的插件示例,使用echarts中百度地图的插件改写,让其支持天地图的展示展示及使用。,使用echarts中高端地图的插件改写,让其支持天地图的展示及使用。 1.echarts-extension-tmap.js 在高度地图...
ECharts 的优点包括易于使用、性能优秀、兼容多种浏览器,且具有良好的交互功能。而 ECharts-GL 是 ECharts 的扩展版本,专门用于处理三维数据可视化和地理空间分析,它为 ECharts 添加了更多高级的三维图表和地图...
3. **使用`echarts`绘制图表**:当`dataTable`中的数据发生变化时,我们需要更新`echarts`的配置,将新选择的数据传递给`echarts`的`setOption`方法,重新绘制图表。 4. **iframe通信**:如果`echarts`和`dataTable...
4. **使用示例**:提供的示例文件将帮助你理解如何将这些GeoJSON数据与Echarts结合使用。通常,你需要加载地图数据,解析GeoJSON,然后设置Echarts的图表类型为"map",指定地图的图例、数据等参数,最后调用Echarts...