最近做的一个在线气象观测网站要实现一个需求：使用图表展示最近五天温湿度等气象要素的曲线变化
具体效果参考：
图示如下（日的数据）：
下面就详述一下实现过程吧（注：相较于原网页我隐去了很多内容，本实现过程就只专注于Echarts图表实现）
HTML页面部分，代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&html lang="zh-CN"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&!-- 在IE运行最新的渲染模式 --&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&!-- 初始化移动浏览显示
&meta name="Author" content="Dreamer-1."&
&script type="text/javascript" src="js/jquery-1.12.3.min.js"&&/script&
&script type="text/javascript" src="mon.min.js"&&/script&
&title&- 观测数据 -&/title&
&!-- 显示Echarts图表 --&
&div style="height:410min-height:100margin:0" id="main"&&/div&
&script type="text/javascript"&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//图表标题
text: '过去五天数据图表'
tooltip: {
trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
控制提示框内容输出格式
formatter: '{b0}&br/&&font color=#FF3333&&●&&/font&{a0} : {c0} ℃ ' +
'&br/&&font color=#53FF53&●&&/font&{a1} : {c1} % ' +
'&br/&&font color=#68CFE8&&●&&/font&{a3} : {c3} mm ' +
'&br/&&font color=#FFDC35&&●&&/font&{a4} : {c4} m/s ' +
'&br/&&font color=#B15BFF&&&&&●&&/font&{a2} : {c2} hPa '
dataZoom: [
type: 'slider',
//支持鼠标滚轮缩放
//默认数据初始缩放范围为10%到90%
type: 'inside',
//支持单独的滑动条缩放
//默认数据初始缩放范围为10%到90%
//图表上方的类别显示
show:true,
data:['温度（℃）','湿度（%）','雨量（mm）','风速（m/s）','压强（hPa）']
'#FF3333',
//温度曲线颜色
'#53FF53',
//湿度曲线颜色
'#B15BFF',
//压强图颜色
'#68CFE8',
//雨量图颜色
//风速曲线颜色
toolbox: {
//工具栏显示
show: true,
feature: {
saveAsImage: {}
//显示&另存为图片&工具
type : 'category',
//先设置数据值为空，后面用Ajax获取动态数据填入
//Y轴（这里我设置了两个Y轴，左右各一个）
//第一个（左边）Y轴，yAxisIndex为0
type : 'value',
name : '温度',
/* max: 120,
min: -40, */
axisLabel : {
formatter: '{value} ℃'
//控制输出格式
//第二个（右边）Y轴，yAxisIndex为1
type : 'value',
name : '压强',
scale: true,
axisLabel : {
formatter: '{value} hPa'
series : [
//系列（内容）列表
name:'温度（℃）',
type:'line',
//折线图表示（生成温度曲线）
symbol:'emptycircle',
//设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
//数据值通过Ajax动态获取
name:'湿度（%）',
type:'line',
symbol:'emptyrect',
name:'压强（hPa）',
type:'line',
symbol:'circle',
//标识符号为实心圆
yAxisIndex: 1,
//与第二y轴有关
name:'雨量（mm）',
type:'bar',
//柱状图表示
//barMinHeight: 10,
//柱条最小高度，可用于防止某数据项的值过小而影响交互
/* label: {
show: true,
position: 'top'
name:'风速（m/s）',
type:'line',
symbol:'emptydiamond',
myChart.showLoading();
//数据加载完之前先显示一段简单的loading动画
var tems=[];
//温度数组（存放服务器返回的所有温度值）
var hums=[];
//湿度数组
var pas=[];
//压强数组
var rains=[];
//雨量数组
var win_sps=[];
//风速数组
var dates=[];
//时间数组
//使用JQuery内置的Ajax方法
type : "post",
//post请求方式
async : true,
//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "ShowInfoIndexServlet",
//请求发送到ShowInfoIndexServlet处
data : {name:"A0001"},
//请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
dataType : "json",
//返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result != null && result.length & 0) {
for(var i=0;i&result.i++){
tems.push(result[i].tem);
//挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组
hums.push(result[i].hum);
pas.push(result[i].pa);
rains.push(result[i].rain);
win_sps.push(result[i].win_sp);
dates.push(result[i].dateStr);
myChart.hideLoading();
//隐藏加载动画
myChart.setOption({
//载入数据
data: dates
//填入X轴数据
//填入系列（内容）数据
// 根据名字对应到相应的系列
name: '温度',
data: tems
name: '湿度',
data: hums
name: '压强',
name: '雨量',
data: rains
name: '风速',
data: win_sps
//返回的数据为空时显示提示信息
alert("图表请求数据为空，可能服务器暂未录入近五天的观测数据，您可以稍后再试！");
myChart.hideLoading();
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败，可能是服务器开小差了");
myChart.hideLoading();
myChart.setOption(option);
//载入图表
Servlet部分，客户端请求提交到 ShowInfoIndex 处，先在 web.xml 里配置一下Servlet映射：
&?xml version="1.0" encoding="UTF-8"?&
&web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"&
&display-name&BlogExample&/display-name&
&servlet-name&ShowInfoIndexServlet&/servlet-name&
&servlet-class&EchartsExample.ShowInfoIndexServlet&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&ShowInfoIndexServlet&/servlet-name&
&url-pattern&/ShowInfoIndexServlet&/url-pattern&
&/servlet-mapping&
&/web-app&
关于ShowInfoIndexServlet，简单说一下请求-响应中间的过程：
客户端发送图表请求给Servlet，Servlet接收到请求后先获取客户端请求查看的气象站名称，然后从数据库（SqlServer2005 Express版）中获取最近五天内该气象站所有的采集数据（装在List中），再用Gson工具将该List转换成Json对象返回给客户端，客户端接收到返回的Json对象后对其进行解析并将相应数据填入Echarts中，然后作显示；
其中Record.java是只对外提供get/set方法的用于封装数据的普通实体类，DBUtil.java是JDBC方式下专门提供Connection、Statement、ResultSet等的数据库工具类。
（原本的连接数据库并获取数据过程需经过业务逻辑层与数据访问层，较为复杂，这里隐去这两层，直接在Servlet内连接数据库并拿取数据）
Ps：墙裂建议使用PreparedStatement进行参数化查询，这样可以有效避免SQL注入！
ShowInfoIndexServlet代码如下：
package EchartsE
import java.io.IOE
import java.sql.C
import java.sql.PreparedS
import java.sql.ResultS
import java.sql.SQLE
import java.text.SimpleDateF
import java.util.*;
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.google.gson.G
* 响应观测记录展示页的Echarts图表数据请求（使用json格式返回客户端需要的数据）
* @author zhong
public class ShowInfoIndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//设定客户端提交给servlet的内容按UTF-8编码
response.setCharacterEncoding("UTF-8");
//设定servlet传回给客户端的内容按UTF-8编码
response.setContentType("text/charset=UTF-8");
//告知浏览器用UTF-8格式解析内容
String name = request.getParameter("name");
//获取台站名参数
//获取当天在内的五天以前的0点格式字符串（用于数据库查询）
cal = Calendar.getInstance();
cal.add(Calendar.DATE, -4);
//获取当天在内的五天以前的日期时间
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd 00:00:00");
//设定日期格式
String fiveDaysAgoStr = sdf1.format(cal.getTime());
//将五天前的日期时间按指定格式转换成字符串
//获取当前时间并将其转换成指定格式的字符串（用于数据库查询）
Date now = new Date();
SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String nowStr = sdf2.format(now);
//System.out.println(nowStr);
//======================================连接数据库操作============================================================================================
* 连接数据库并获取五天内该名称的气象站的所有采集数据
List&Record& records = new ArrayList&Record&();
//用一个ArrayList来盛装封装了各气象数据的对象
Connection conn =
PreparedStatement pstmt =
ResultSet rs =
conn = DBUtil.getConnection();
//获取与数据库的连接
String sql = "select * from alldata where data_taizhan_num = ? and data_date &= ? and data_date &= ? order by data_date asc";
//初始化SQL查询语句
pstmt = conn.prepareStatement(sql);
//创建preparedStatement语句对象
pstmt.setString(1, name);
//设定查询参数
pstmt.setString(2, fiveDaysAgoStr);
pstmt.setString(3, nowStr);
rs = pstmt.executeQuery();
//获取查询到的结果集
while (rs.next()) {
//封装Record对象
Record r = new Record();
r.setTaizhan_num(rs.getString(1));
r.setDate(rs.getTimestamp(2));
r.setTem(rs.getString(3));
r.setHum(rs.getString(4));
r.setPa(rs.getString(5));
r.setRain(rs.getString(6));
r.setWin_dir(rs.getString(7));
r.setWin_sp(rs.getString(8));
//将时间转换成给定格式便于echarts的X轴日期坐标显示
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = sdf.format(rs.getTimestamp(2));
r.setDateStr(str);
//System.out.println(r.getTem()+" | "+r.getHum()+" | "+r.getPa()+" | "+r.getRain()+" | "+r.getWin_dir()+" | "+r.getWin_sp());
records.add(r);
//将封装好的Record对象放入列表容器中
} catch (SQLException e) {
System.out.println("查询出错，操作未完成!");
e.printStackTrace();
} finally {
//查询结束后释放资源
DBUtil.close(rs);
DBUtil.close(pstmt);
DBUtil.close(conn);
//======================================连接数据库操作（完）============================================================================================
//将list中的对象转换为Json格式的数组
Gson gson = new Gson();
String json = gson.toJson(records);
//System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/ charset=utf-8");
response.getWriter().write(json);
alldata表部分数据截图：
Record类代码如下：
package EchartsE
import java.sql.*;
* 封装气象数据信息
* @author zhong
public class Record {
private String taizhan_
private String win_
private String win_
private String dateS
//观测日期（用于Echarts显示格式）
//观测日期（原始格式）
* 获取观测日期（用于echarts图表展示）；
* @return 观测日期值
public String getDateStr() {
return dateS
* 设置观测日期（用于echarts图表展示）；
* @param dateStr 待设置观测日期值
public void setDateStr(String dateStr) {
this.dateStr = dateS
* 获取产生该观测记录的台站名称；
* @return 台站名称
public String getTaizhan_num() {
return taizhan_
* 设置产生该观测记录的台站名称；
* @param taizhan_num 待设置台站名称
public void setTaizhan_num(String taizhan_num) {
this.taizhan_num = taizhan_
* 获取温度；
* @return 温度值
public String getTem() {
* 设置温度；
* @param tem 待设置温度值
public void setTem(String tem) {
this.tem =
* 获取湿度；
* @return 湿度值
public String getHum() {
* 设置湿度；
* @param hum 待设置湿度值
public void setHum(String hum) {
this.hum =
* 获取压强；
* @return 压强值
public String getPa() {
* 设置压强；
* @param pa 待设置压强值
public void setPa(String pa) {
* 获取雨量；
* @return 雨量值
public String getRain() {
* 设置雨量；
* @param rain 待设置雨量值
public void setRain(String rain) {
this.rain =
* 获取风向；
* @return 风向值
public String getWin_dir() {
return win_
* 设置风向；
* @param win_dir 待设置风向值
public void setWin_dir(String win_dir) {
this.win_dir = win_
* 获取风速；
* @return 风速值
public String getWin_sp() {
return win_
* 设置风向；
* @param win_sp 待设置风向值
public void setWin_sp(String win_sp) {
this.win_sp = win_
* 获取观测日期；
* @return 观测日期
public Timestamp getDate() {
* 设置观测日期；
* @param date 观测日期值
public void setDate(Timestamp date) {
this.date =
DBUitl类（数据库工具类）代码如下：
package EchartsE
import java.sql.*;
import org.apache.tomcat.jdbc.pool.DataS
import org.apache.tomcat.jdbc.pool.PoolP
* 数据库工具类（采用了tomcat jdbc pool）
* @author zhong
public class DBUtil {
private static DataS
//配置tomcat jdbc pool (连接池)
PoolProperties p = new PoolProperties();
p.setUrl("jdbc:sqlserver://localhost:1433; DatabaseName=weather");
//设置连接的url
p.setDriverClassName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
//载入数据库驱动
p.setUsername("sa");
//用于远程连接的用户名
p.setPassword("2003NianDeDiYiChangXue");
p.setJmxEnabled(true);
p.setTestWhileIdle(false);
p.setTestOnBorrow(true);
p.setValidationQuery("SELECT 1");
p.setTestOnReturn(false);
p.setValidationInterval(30000);
p.setTimeBetweenEvictionRunsMillis(30000);
p.setMaxActive(100);
p.setInitialSize(10);
p.setMaxWait(10000);
p.setRemoveAbandonedTimeout(60);
p.setMinEvictableIdleTimeMillis(30000);
p.setMinIdle(10);
p.setLogAbandoned(true);
p.setRemoveAbandoned(true);
p.setJdbcInterceptors(
"org.apache.tomcat.jdbc.pool.interceptor.ConnectionS"+
"org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer");
ds = new DataSource();
ds.setPoolProperties(p);
private DBUtil() {}
* 获取一个数据库连接（Connection）；
* @return Database Connection
public static Connection getConnection() {
Connection conn =
conn = ds.getConnection();
} catch (SQLException e) {
e.printStackTrace();
* 关闭传入的Connection；
* @param conn 待关闭的Connection
public static void close(Connection conn) {
if (conn != null) {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
* 关闭传入的Statement；
* @param stmt
待关闭的Statement
public static void close(Statement stmt) {
if (stmt != null) {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
* 关闭传入的ResultSet；
* @param rs
待关闭的ResultSet
public static void close(ResultSet rs) {
if (rs != null) {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
&&&&&&&&&&&&&&&&&&&&&&&&&&我是小小分割线&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
关于远程连接（包括使用Eclipse连接）SqlServer2005我再多嘴两句：
当确认连接的URL，驱动加载，用户名，密码都配置正确时，仍然抛出&java.lang.NullPointerException&的话，请打开开始菜单Microsoft SQL Server 2005软件目录下的SQL Server配置管理器：
①：启用SQL Server 2005网络配置 下的 SQLEXPRESS协议 内的 TCP/IP 协议，并右键TCP/IP协议选择属性，确保IP地址一栏最末的TCP端口为1433，具体见下图
②：启用 SQL Native Client配置 下的 客户端协议 内的 TCP/IP 协议，并右键查看TCP/IP 属性，确保端口为1433，具体见下图
③：重新启动 SQL Server 2005服务 下的 SQL Server服务，详情见下图
至此，应该就解决了java.lang.NullPointerException这个错误了。
&&&&&&&&&&&&&&&&&&&&&&&&我是小小分割线&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
让我们再回到原来的Echarts图表显示过程上，你可以试着在后台打印看看转换出的Json字符串，关于Json的使用这里我不再多言解释，具体可参考简单易懂的官方教程：
最后再贴一下实现效果吧：
阅读(...) 评论()Echarts 动态获取数据进行图表的展示 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 11时,
Echarts官网的demo都采用的数据都是静态数据，本demo是在Echarts官网入门demo的基础上改的，从后台&获取数据并展示，供入门参考
代码片段(2)
1.&[代码]前端页面代码&&&&
&%@ page language="java" contentType="text/ charset=utf-8"
pageEncoding="utf-8"%&
String path = request.getContextPath();
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="width: 800 height: 300px"&&/div&
&!-- ECharts单文件引入 --&
&script type="text/javascript" src="js/jquery-2.1.4.min.js"&&/script&
&script type="text/javascript" src="build/dist/echarts.js"&&/script&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
// 路径配置
require.config({
echarts : 'build/dist'
require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
legend : {
xAxis : [ {
type : 'category',
yAxis : [ {
type : 'value'
series : []
type : "POST",
url : "gettestdata",
dataType : "json",
success : function(result) {
//将从后台接收的json字符串转换成json对象
var jsonobj = eval(result);
//给图标标题赋值
option.legend.data = jsonobj.
//读取横坐标值
option.xAxis[0].data = jsonobj.
var series_arr = jsonobj.
//驱动图表生成的数据内容，数组中每一项代表一个系列的特殊选项及数据
for (var i = 0; i & series_arr. i++) {
option.series[i] = result.series[i];
//过渡控制，隐藏loading（读取中）
myChart.hideLoading();
// 为echarts对象加载数据
myChart.setOption(option);
2.&[代码]后台数据封装代码&&&&
//通过ajax请求数据 将请求的数据返回到页面进行图表的显示
@RequestMapping("gettestdata")
public void getTestData(HttpServletResponse response) {
List&String& legend = new ArrayList&String&(Arrays.asList(new String[] { "销量"}));
List&String& axis = new ArrayList&String&(
Arrays.asList(new String[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" }));
List&Series& series = new ArrayList&Series&();
series.add(new Series("销量", "bar", new ArrayList&Integer&(Arrays.asList(5, 20, 40, 10, 10, 20))));
Echarts echarts = new Echarts(legend, axis, series);
response.setContentType("text/charset=utf-8");
out = response.getWriter();
Gson gson = new Gson();
String str = gson.toJson(echarts);
System.out.println("str:"+str);
out.write(str);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
开源中国-程序员在线工具：
相关的代码(1493)
开源从代码分享开始
cobraxp的其它代码echarts柱状图
&Fork自实现自己的echarts legend。
在Fork了此代码
宇宙好男银丶
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Anonymity_阿浩
在Fork了此代码
Ta的最近动态
Fork了代码
Fork了代码
Fork了代码
Fork了代码
Ta发布的其他代码(115)
&&0评/0Fork，更新于1年前。
&&0评/1Fork，更新于1年前。
&&0评/0Fork，更新于1年前。
&&0评/0Fork，更新于1年前。
&&0评/0Fork，更新于1年前。官方教程的Value直接是一个值。由于是用MVC开发，直接取出的值，但是当值为空的时候，饼图仍然会显示出一条线，如下图。我想实现的效果是在数据为零的时候不显示。代码如下：
series&:&[&{
&&&&&&&&name:'访问来源',
&&&&&&&&&&&&&&type:'pie',
&&&&&&&&&&&&&&radius&:&'55%',
&&&&&&&&&&&&&&center:&['50%',&'60%'],
&&&&&&&&&&&&&&data:[
&&&&&&&&&&&&&&{value:@Model.D,&name:'直接访问'},
&&&&&&&&&&&&&&{value:@Model.Mail,&name:'邮件营销'},
&&&&&&&&&&&&&&{value:@Model.Ad,&name:'视频广告'},
&&&&&&&&&&&&&&{value:@Model.Search,&name:'搜索引擎'}
&&&&&&&&&&&&&&&&&&&&&&&&],
&&&itemStyle:{&
&&&&&&&&&&& normal:{&
&&&&&&&&&&&&&&&&&&&&&&label:{&
&&&&&&&&&&&&&&&&&&&&show:&true,&
&&&&&&&&&&&&&&&&&&&&formatter:&'{b}&:&{c}&({d}%)'&
&&&&&&&&&&&&&&&&&&&&&&},&
&&&&&&&&&&&&&&&&&&&&&&labelLine&:{show:true}&
&&&&&&&&&&&&&&&&}&
&&&&&&&&&&& &&&}&
回复讨论(解决方案)
&&&&&&&&&&&&&&&&&&&&&&&&label:&{&show:&function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(value&==&0.00)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&return&&}
&&&&&&&&&&&&&&&&&&&&&&&&}&()
&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&labelLine:&{&show:&function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(value&==&0.00)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&return&&}
&&&&&&&&&&&&&&&&&&&&&&&&}&()
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&label:&{&show:&function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(value&==&0.00)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&return&&}
&&&&&&&&&&&&&&&&&&&&&&&&}&()
&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&labelLine:&{&show:&function&()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if&(value&==&0.00)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&return&&}
&&&&&&&&&&&&&&&&&&&&&&&&}&()
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&}
官方的代码中没有itemStyle的，上面的是我自己加的，但是加进去反而不行了。
请问下itemStyle写在什么位置，在series&内还是外？
你不如在查询语句里直接筛选掉数据为0的数据,不查询
或者查询出来,在数据源里remove掉,再给图表
你不如在查询语句里直接筛选掉数据为0的数据,不查询
或者查询出来,在数据源里remove掉,再给图表
这个项目用的是MVC开发，有一个专门统计数据的Model,查询出来的数据用的强类型，通过@Model.Value直接调用的
首先，感谢楼上两位的回复，我又去看了下官方其它图的代码，好像有点开窍了。我去继续钻研下，大家有好的方法也请发出来分享。
问题已经解决了，用的1L的方法，将itemStyle写到data域中就行了。
其实之前也找到过该答案，跟1L的一模一样，同样是写在data域，可能是由于自己的JS水平太低，很多细节的东西不能理解(PS：基本不会)，导致各种Demo都失败。有必要系统学习下JS了。&&您所在位置：&&&&&&&&
ECharts图表组件入门教程：如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
&|&时间： 18:17:35&|&[
大]&|&来源：ECharts入门&|&
阅读：24180&|&
摘要]： 一个图表的数据只有动态才显得更加有活力和生命力。那么我们如何将图表的数据进行提炼出来呢？让其可以变成可变的数组或者后期可以通过ajax获取数据进行赋值。另外我们如何动态更新echars图表option内每一项的属性或者配置？ 一、如何将图表数据进行数组提炼或者ajax获取 通过观察不难发现echarts图表的核心就是坐标轴和series序列数据，然后这两块的数据其实都是类似一个一维数组的形式。所以我们可以提炼出数组来存放图表核心数据，这里例举将series内data数据提炼出来： ///这里定义一个数组对象且设置两组数据 //后期这里可以改成动态的数据 var dataArr = new Array(); var dataObj1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2,...
一个图表的数据只有动态才显得更加有活力和生命力。那么我们如何将图表的数据进行提炼出来呢？让其可以变成可变的数组或者后期可以通过ajax获取数据进行赋值。另外我们如何动态更新echars图表option内每一项的属性或者配置？
一、如何将图表数据进行数组提炼或者ajax获取
通过观察不难发现echarts图表的核心就是坐标轴和series序列数据，然后这两块的数据其实都是类似一个一维数组的形式。所以我们可以提炼出数组来存放图表核心数据，这里例举将series内data数据提炼出来：
///这里定义一个数组对象且设置两组数据
//后期这里可以改成动态的数据
var dataArr = new Array();
var dataObj1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
var dataObj2 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];
dataArr.push(dataObj1);
dataArr.push(dataObj2);
接着我们就可以在series内直接使用数组数据了，形如：
name: '蒸发量',
type: 'bar',
data: dataArr[0]
name: '降水量',
type: 'bar',
data: dataArr[1]
后期你还可以将dataArr内的数据通过ajax获取然后赋值即可。
二、如何动态修改echarts的option配置项
option是关于echarts图表的整个配置，我们需要动态修改图表的某些属性和数据，均需要通过设置echarts的option，然后通过chart.setOption(option)来完成更新操作。
1、如何动态设置y轴刻度
假如我们需要动态设置y轴刻度，为其追加一个单位，应该如何做呢？示例代码如下所示：
///动态更新图表设置y轴刻度追加单位
function updateChart() {
var option = myChart.getOption();
//动态设置y轴刻度追加单位
option.yAxis[0].axisLabel = {
formatter: function (value) {
return value + &%&;
myChart.setOption(option);
关于更多option的修改，和上述示例类似。只要你能够保证赋值的为对象即可。
&本文为原创型文章转载请尊重他人劳动成果并注明出处：
&可以扫描本站该博客文章的QR二维码进行访问&&
&暂无任何评论
* 以下用户言论只代表其个人观点，不代表STEP DAY网站的观点或立场
?自觉遵守：爱国、守法、自律、真实、文明的原则
?尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
?严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
?承担一切因您的行为而直接或间接导致的民事或刑事法律责任
?您在STEP DAY新闻评论发表的作品，STEP DAY有权在网站内保留、转载、引用或者删除
?参与本评论即表明您已经阅读并接受上述条款
友情链接：
这是一场关于?丝向高帅富/白富美的逆袭革命
每天进步一小步 人生进步一大步
尚缘 SWOOP 好文章，永远不应该消失
©2014