【echarts 刷新图表数据】图解ECharts数据图表使用欢迎光临经典语录网
位置：>>>>图解ECharts数据图表使用图解ECharts数据图表使用ECharts，缩写来自Enterprise
Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9
/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性
化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表
盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展
模块化单文件引入(推荐)
1：新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom，如下图所示：
2：新建&script&标签引入模块化单文件echarts.js，如下图所示：
3：新建&script&标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)，如下图所示：
4：&script&标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，如下图所示：
5：浏览器中打开ecarts.html，就可以看到以下效果，如下图所示：
标签式单文件引入
1：新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom，如下图所示：
2：新建&script&标签引入echart-all.js，如下图所示：
3：新建&script&，使用全局变量echarts初始化图表并驱动图表的生成，如下图所示：
4：浏览器中打开echarts.html，可以看到如下效果，如下图所示：
希望本文【echarts 刷新图表数据】图解ECharts数据图表使用能帮到你。上一篇：下一篇：图解数据数据图表使用本文相关搜索网友推荐的经典语句每日推荐美文最新发布的语录范文栏目使用ECharts实现数据图表分析
一、ECharts介绍 实现对统计数据的图形分析之前用过JFreeChar，但它是用纯java实现编码繁琐且效果不佳，后来又使用过Fusioncharts 报表工具，它是基于Flash的图表组件、以XML为数据、提供丰富的Flash动画作为图标模板，实现简单效果不错但flash是老东西了且浏览器需要flash插件的支持，更关键的是手机端浏览器基本上不支持。最近看到百度提供一套ECharts（Enterprise Charts）商业产品图表库，它是基于ZReader（一个全新的轻量级canvas类库），可在pc和移动端流畅的运行，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）等12类图表。
二、实现应用案例 下面就结合应用看看ECharts的使用案例效果：条形图
切换折线图
查看图形数据
三、如何使用ECharts 1、环境搭建 下载echarts-2.2.2,官网地址： /
将build/dist目录下的内容拷贝到项目中 如图所示：
2、在sell_char.html页面中引入文件chart目录下存放了12种图形的js文件，可根据需要引入，这也是官方推荐的导入方式（模块化单文件引入）&head&&script src=&echarts/dist/echarts.js&&&/script&&script src=&jquery/jquery-1.7.2.min.js&&&/script&&script type=&text/javascript&& $(function(){//jquery的文档就绪函数
// 路径配置
require.config({
echarts: 'echarts/dist'
'echarts',//代指echarts设置的路径，即'echarts/dist'
'echarts/chart/bar', // 使用柱状图加载bar模块，引入bar.js
'echarts/chart/line'//加载折线图,引入line.js文件, 按需加载
]，function (ec) {
var myChart = ec.init(document.getElementById('sell_data'));
var option = { //配置选项，使用echarts的关键部分
myChart.setOption(option); });&/script&&/head&&!-- 为ECharts准备一个具备大小的区域，必须指定高度 --&&div id=&sell_data& style=&height:400px&&&/div&3、sell_char.html完整的代码&!-- ECharts单文件引入 --&&script src=&echarts/dist/echarts.js&&&/script&&script src=&jquery/jquery-1.7.2.min.js&&&/script&&script type=&text/javascript&& $(function(){
//获得后台数据
var category_//类型信息
var soft_//软件部销售数据
var net_//网络部销售数据
var mobile_//移动事业部销售数据
url:'/21-sun/echarts/EChartsDataServelt',
async:false,
success: function(data){
category_data=data.
soft_data=data.soft_
net_data=data.net_
mobile_data=data.mobile_}
// 路径配置
require.config({
echarts: 'echarts/dist'
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('sell_data'));
var option = {
tooltip: {//提示框，鼠标悬浮交互时的信息提示
show: true
toolbox:{//定义工具按钮
show : true,
feature : {
dataView : {show: true, readOnly: false},//数据信息按钮
magicType : {show: true, //显示折线、柱状图等切换按钮
type: ['line', 'bar','stack', 'tiled']}
legend: {//图例
data:['软件部','网络板块','移动事业部']
xAxis : [//x轴设置
type : 'category',//x轴显示类别
data : category_data //[&第一季度&,&第二季度&,&第三季度&,&第四季度&]
yAxis : [//y轴设置
type : 'value' //y轴显示数据值
series : [
&name&:&软件部&,
&type&:&bar&,
&data&:soft_data //[80, 300, 200, 100]
&name&:&网络板块&,
&type&:&bar&,
&data&:net_data //[50, 200, 120, 200]
&name&:&移动事业部&,
&type&:&bar&,
&data&:mobile_data //[20, 60, 30, 15]
// 为echarts对象加载数据
myChart.setOption(option);
); }); &/script&&/head&&body& &div id=&sell_data& style=&height:400px&&&/div& &!-- ECharts单文件引入 --&&/body&&/html&4、后台EChartsDataServelt代码public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType(&text/ charset=utf-8&);JSONObject jsonObj=new JSONObject();//后台数据，这里给定数据就不从数据库获取了Map map=new HashMap();map.put(&category&, new String[]{&第一季度&,&第二季度&,&第三季度&,&第四季度&});map.put(&soft_data&, new int[]{80, 300, 200, 100} );map.put(&net_data&, new int[]{50, 200, 120, 200});map.put(&mobile_data&,new int[]{20, 60, 30, 15});jsonObj.putAll(map);response.getWriter().println(jsonObj.toString());} 想要了解更多内容的小伙伴，可以点击 查看源码 ，亲自运行测试。
疑问咨询或技术交流，请加入官方QQ群：
作者： 杰瑞教育
出处： /jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
最新教程周点击榜
微信扫一扫力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （百度） · （百度）
by 于博（新华社） · 吴楚茵（南方都市报） · （百度）
by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · （百度）
by （北京理工大学软件学院）
by （CSDN开源夏令营）