使用echarts画图表

项目需要在网页上画图表，在网上找了一下，发现百度出品的echarts非常好用。echarts把看似复杂的图表进行了分解，使用结构化的模型来完成图表的配置。画图表就跟写CSS一样，实际上echarts使用的很多属性名字都和CSS是一样的。

echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。

echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。

想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。

1 画一个最粗糙的图表

官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
<div id="main"
style="height: 400px; width: 800px; border: 1px dotted black"></div>
<script src="../js/echarts-plain-original.js"></script>
<script type="text/javascript">
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById('main'));
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
// 标题
title : {
text : '销量和进货量'
},
// x轴
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
} ],
// y轴
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}件'
}
} ],
// 数值序列
series : [ {
name : '销量',
type : 'line',
data : [ 5, 20, 40, 10, 10, 20 ],
} ]
};
// 为图表实例加载数据
myChart.setOption(option);
</script>
</body>
</html>

得到的图表

2 为图表添加各种样式

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
<div id="main"
style="height: 400px; width: 800px; border: 1px dotted black"></div>
<script src="../js/echarts-plain-original.js"></script>
<script type="text/javascript">
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById('main'));
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
// 标题
title : {
text : '销量和进货量',
x : 'center',
y : 'top',
textStyle : {
fontSize : 26,
fontFamily : "微软雅黑",
}
},
//
grid : {
borderWidth : 0
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'line',
lineStyle : {
color : '#0f0',
width : 2,
type : 'solid'
}
}
},
// x轴
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
axisTick : {
show : false
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// y轴
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}件'
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// 数值序列
series : [ {
name : '销量',
type : 'line',
data : [ 5, 20, 40, 10, 10, 20 ],
itemStyle : {
normal : {
color : '#f00',
lineStyle : {
width : 2
},
label : {
show : true,
position : 'right',
textStyle : {
fontStyle : 'bolder',
fontSize : 15
}
}
}
},
symbol : 'emptyCircle',
symbolSize : 4,
} ]
};
// 为图表实例加载数据
myChart.setOption(option);
</script>
</body>
</html>

加了样式之后的结果如下，我想说我很佩服做美工的同学（我自己画的图表真不好看）

3 为图表添加事件

[html] view plaincopy

// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
var mes = param.name + ':' + param.value;
document.getElementById('info').innerHTML = mes;
}
}
myChart.on(echarts.config.EVENT.CLICK, eConsole);

效果就是点击图表之后，可以在下面显示出被点击的类目和对应的数量

4 最后，做了一个小练习，使用jQuery来从服务端请求数据

这里，客户端的option一开始只有样式，没有数据。从服务端得到数据之后，把option补全，然后调用setOption方法就OK了。

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<title>通过ajax为echarts更新数据</title>
</head>
<body>
<div id="main"
style="height: 400px; width: 800px; border: 1px dotted black"></div>
<span id="info"></span>
<script src="../js/echarts-plain-original.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById('main'));
// 使用jquery发送post请求，第四个参数指明如何解析服务端返回的数据。
// 服务端返回的必须是标准格式的json，也就是双引号括起来的键值对
$.post("../data", {
name : "testdata"
}, function(data) {
option.title.text = data.title;
option.xAxis[0].data = data.category;
option.series[0].data = data.value;
// 取得数据后显示到图表中
myChart.setOption(option);
myChart.on(echarts.config.EVENT.CLICK, eConsole);
}, 'json');
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
// 标题
title : {
x : 'center',
y : 'top',
textStyle : {
fontSize : 26,
fontFamily : "微软雅黑",
}
},
//
grid : {
borderWidth : 0
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'line',
lineStyle : {
color : '#0f0',
width : 2,
type : 'solid'
}
}
},
// x轴
xAxis : [ {
type : 'category',
axisTick : {
show : false
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// y轴
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}件'
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// 数值序列
series : [ {
name : '销量',
type : 'line',
itemStyle : {
normal : {
color : '#f00',
lineStyle : {
width : 2
},
label : {
show : true,
position : 'right',
textStyle : {
fontStyle : 'bolder',
fontSize : 15
}
}
}
},
symbol : 'emptyCircle',
symbolSize : 4,
} ]
};
// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
var mes = param.name + ':' + param.value;
document.getElementById('info').innerHTML = mes;
}
}
});
</script>
</body>
</html>

服务端的servlet如下，这种小东西还写的不熟练：获取文件路径，设置UTF-8编码，关闭流等操作还不够轻车熟路

[java] view plaincopy

protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
response.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String fullPath = this.getServletContext().getRealPath("/") + "data"
+ File.separator + name;
PrintWriter out = null;
BufferedReader br = null;
try
{
out = response.getWriter();
br = new BufferedReader(new FileReader(fullPath));
String str = null;
while ((str = br.readLine()) != null)
{
out.print(str);
}
out.flush();
}
finally
{
if (br != null)
{
br.close();
}
// 即使自己不关闭，tomcat等容器也会关闭
if (out != null)
{
out.close();
}
}
}

服务端返回的数据一定要是标准格式的json。标准是指用双引号，不用单引号。另外，最后一个键值对后面不要有逗号，IE8中不允许JavaScript代码中的json采用这种不规范的写法，FireFox容许。

[javascript] view plaincopy

{
"title" : "销量和进货量",
"category" : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
"value" : [ 5, 20, 40, 10, 10, 20 ]
}

如果在图表已经加载过数据之后，想要换一组数据，可以用getOption方法得到一份option的深拷贝，然后把其中的数据改掉，再调用setOption方法就可以：

[html] view plaincopy

var newOption = myChart.getOption(); // 深拷贝
newOption.xAxis[0].data = newData.category;
newOption.series[0].data = newData.value;
myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并

使用echarts画图表相关推荐

uni-app 使用web的echarts画图表
uni-app 使用web的echarts画图表 initEcharts: function() {let data = {xAxis: [0, 1, 2, 3, 4, 5],data: [25, 3 ...
vue 用echarts画图表
创建vue项目打开cmd 输入: cd到项目目录安装element ui 和 echarts 在项目中引入element ui 和 echarts 在chart/src/main.js文件中输入 ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
在vue中使用echarts,echarts-map:echarts画地图
1.首先安装:cnpm install echarts --save 2.然后main.js引入(也可以组件内引入) // 引入ECharts图表公共组件 import echarts from 'e ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...
echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）
1. 使用echarts画标记线(工字型) 1.1 实现效果 1.2 使用属性详细参数可查看echarts官网,markline属性 https://echarts.apache.org/zh/op ...
echarts如何显示多个柱形图_使用echarts画多维柱状图
前言在此之前,已经跟大家分享了如何使用echarts画折线图.双折线图.柱状图,今天跟大家分享一下使用echarts画多维柱状图. 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. ...

使用echarts画图表

使用echarts画图表相关推荐

最新文章

热门文章