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