`
liulanghan110
  • 浏览: 1075582 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

echarts使用

阅读更多
<!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使用的世界地图world.js

    Echarts使用地图类型的组件时用到的js文件, 引入该文件可以使用ECharts Map,世界地图world.js

    echarts使用方法

    **ECharts 使用方法详解** ECharts 是一个由百度开发的,基于 JavaScript 的开源可视化图表库。它支持多种图表类型,如折线图、柱状图、饼图、散点图等,广泛应用于数据可视化的场景。ECharts 提供了丰富的交互功能...

    echarts使用小结

    下面我们将深入探讨ECharts的基本使用方法。 **一、安装与引入** 在开始使用ECharts前,首先需要下载或通过npm安装ECharts库。如果选择下载,可以从ECharts官网获取最新版本的压缩包,解压后在HTML文件中引入`...

    Echarts使用的JS库

    在标题"**Echarts使用的JS库**"中提到的几个JavaScript文件是ECharts地图显示的必要组成部分。 1. **echarts.min.js**: 这是ECharts的核心库,包含了ECharts的所有功能。开发者可以通过这个文件在网页中引入ECharts...

    百度echarts使用教程之折线图demo案例源码

    在"百度echarts使用教程之折线图demo案例源码"这个压缩包中,包含了直接运行就能查看效果的代码,这对于初学者来说是很好的学习资源。 首先,我们要了解ECharts的基本结构。在HTML文件中,我们需要引入ECharts的库...

    源码 - flask 和 echarts 使用柱状图折线图等可视化图表展示二手房统计数据

    echarts 图表 jinja 模版 三、菜鸟实战 初始化 Flask 框架,设置路由 各行政区房屋均价柱状图分析 echarts 渲染柱状图 各面积区间房屋占比饼状图 echarts 渲染饼状图 运行结果 运行截图 数据示例

    Echarts使用.7z

    在这个压缩包中,"Echarts使用"可能包含了一些实战示例或扩展资料,帮助开发者解决这些问题。 首先,了解ECharts的基本使用方法是至关重要的。这包括在HTML中引入ECharts库,创建一个用于展示图表的DOM元素,然后...

    ECharts使用心得(echart map)

    ECharts使用心得 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个...

    echarts使用timeline

    echarts3中如何使用timeline,官方的事例代码不是很容易看懂,所以写示例希望也能帮助你搞定timeline,原文地址 http://blog.csdn.net/kebi007/article/details/60882367

    echarts+vue 动态绘制波纹世界城市效果,title富文本效果

    - `world.js`:这是Echarts使用的地理坐标系文件,包含了世界地图的数据,用于Echarts渲染地图。 - `echarts.min.js`:Echarts的核心库,提供图表绘制和数据处理功能。 - `vue.min.js`:Vue.js的压缩版库,用于...

    ECharts 使用demo

    "ECharts 使用demo"这个主题显然关注的是如何有效地利用ECharts进行数据可视化。下面我们将深入探讨ECharts的核心特性、基本使用方法以及一些常见图表类型的示例。 1. **ECharts核心特性**: - **跨浏览器支持**:...

    echarts使用示例

    二、ECharts使用示例 1. **引入ECharts**:在HTML文件中,通过`&lt;script&gt;`标签引入ECharts的JavaScript文件。你可以从CDN(内容分发网络)或者本地安装的ECharts目录中引入。例如: ```html &lt;script src="path/to/...

    eCharts使用实例

    **ECharts 使用实例详解** ECharts 是一个由百度开源的,基于 JavaScript 的数据可视化库,它提供了丰富的图表类型,精美的图表效果以及便捷的交互功能,适用于网页端的数据展示。在本资源中,我们将深入探讨如何...

    echarts使用demo

    echarts使用demo

    博文《cesium结合echarts使用》所提及的文件

    博文《cesium结合echarts使用》所提及的文件

    echarts在jsp中使用配置手册

    Echarts使用RequireJS来管理依赖关系和加载模块,因此需要在JSP页面中配置RequireJS。可以使用以下代码配置RequireJS: ```javascript require.config({ paths: { echarts: '&lt;genesis:base/&gt;/js/echarts', '...

    echarts中使用天地图的插件示例

    echarts中使用天地图的插件示例,使用echarts中百度地图的插件改写,让其支持天地图的展示展示及使用。,使用echarts中高端地图的插件改写,让其支持天地图的展示及使用。 1.echarts-extension-tmap.js 在高度地图...

    echarts~echarts-gl 配套版本文件

    ECharts 的优点包括易于使用、性能优秀、兼容多种浏览器,且具有良好的交互功能。而 ECharts-GL 是 ECharts 的扩展版本,专门用于处理三维数据可视化和地理空间分析,它为 ECharts 添加了更多高级的三维图表和地图...

    echarts和dataTable的结合使用查询数据

    3. **使用`echarts`绘制图表**:当`dataTable`中的数据发生变化时,我们需要更新`echarts`的配置,将新选择的数据传递给`echarts`的`setOption`方法,重新绘制图表。 4. **iframe通信**:如果`echarts`和`dataTable...

    全国地图geoJson数据,可结合echarts使用,附带使用示例

    4. **使用示例**:提供的示例文件将帮助你理解如何将这些GeoJSON数据与Echarts结合使用。通常,你需要加载地图数据,解析GeoJSON,然后设置Echarts的图表类型为"map",指定地图的图例、数据等参数,最后调用Echarts...

Global site tag (gtag.js) - Google Analytics