<!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 基本使用方法和总结,
echarts 图表 jinja 模版 三、菜鸟实战 初始化 Flask 框架,设置路由 各行政区房屋均价柱状图分析 echarts 渲染柱状图 各面积区间房屋占比饼状图 echarts 渲染饼状图 运行结果 运行截图 数据示例
echarts3中如何使用timeline,官方的事例代码不是很容易看懂,所以写示例希望也能帮助你搞定timeline,原文地址 http://blog.csdn.net/kebi007/article/details/60882367
ECharts使用心得 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个...
Echarts使用地图类型的组件时用到的js文件, 引入该文件可以使用ECharts Map,世界地图world.js
ECharts 使用demo ECharts 使用demo ECharts 使用demo
百度echarts使用教程之折线图demo案例源码,此文件可以直接运行看效果
百度echarts使用教程之散点图demo案例源码,一个HTML文件,DEMO,可直接打开
里面是echarts的一些简单例子,适合初学者参考。请使用visual studio2012或者2013打开,使用asp.net mvc3写的
主要介绍了echarts 使用formatter 修改鼠标悬浮事件信息操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
【资源说明】 1、该资源内项目代码都是经过测试运行成功,功能正常的情况下才上传的,请放心下载...基于NuxtJS写的一个疫情地图(源码+项目说明)(使用新浪接口以及其他的JSONP接口,内有详细Echarts使用方法).zip
echarts使用demo
ECharts使用心得 -日常使用的 适合新手看 老鸟就不需要了
博文《cesium结合echarts使用》所提及的文件
1.echarts本地运行项目 2.echarts使用示例
GoogleWebToolkit(GWT)是一个Java软件开发框架用于开发类似于GoogleMaps和Gmail的AJAX应用程序。GWT的设计参考JavaAWT包设计,类命名规则、接口...在 GWT框架中使用 Echarts 。 注意: 本项目jar包已删除,请新建项目。
Echarts地图显示需要用到的js库,包括echarts.min.js、echarts-map-china.js、jquery.min.js、jquery-latest.js
ecahrts插件的使用实例。简单好用,基本可以满足一般开发的图表要求,具体的需要细化细节需要自己自行研究,或者是关注我的博客,我会在csdn博客上写一些自己用到echart插件的心得和经验,欢迎交流。
echarts本身支持百度地图,但是官方网站说明实在是太简单,想提取使用太麻烦,所以弄了个简单的例子,使用尽量少的js文件,剔除掉多余的js
自己用的echarts 3,需要扩展地图,从其他地方收集来的,然后自定义拓展 包含全国地图,各省各市各县,如果还需要更细,你就需要自己想办法了