echarts入门实例

最新推荐文章于 2024-04-01 00:37:13 发布

想飞翔的猪

最新推荐文章于 2024-04-01 00:37:13 发布

阅读量985

点赞数

分类专栏： echarts 实例入门图表文章标签： javascript

本文链接：https://blog.csdn.net/u011722519/article/details/42711701

版权

echarts 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

实例

1 篇文章 0 订阅

订阅专栏

入门

1 篇文章 0 订阅

订阅专栏

刚刚接触echarts，对于官网上的文档也看了些，但是对于新手最好的还是看demo，所以就在网上找了找，自己写了一个最简单的例子。

1、工程所需要的文件：http://echarts.baidu.com/build/echarts-2.1.10.zip，直接下载包，解压缩。

2、建立新文件夹（放工程项目），命名随意，这里命名为web，下面再建一个echarts文件夹，放置js文件。

3、本人习惯引用js包进行操作，所以没有采用官方的配置方法来操作，所以直接找到解压下来的echarts-2.1.10\build\dist目录，把文件全部拷贝到js目录下。

4、web下建立index.jsp页面，进行工程编码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>


<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap"
style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainPie"
style="height:500px;border:1px solid #ccc;padding:10px;"></div>



<script src="./echarts/echarts.js"></script>
<script type="text/javascript">
// 配置echarts包所在的路径，是放置所有包的路径
require.config({
paths : {
echarts : './echarts'
}
});

// 根据上面引用的配置路径，选择当前要用到的js包，下面的echarts即上面配置的路径，后面的即单签需啊哟用到的js包名：bar.js、line。js、。。。
require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',
'echarts/chart/map', 'echarts/chart/pie' ], function(ec) {//回调函数，即引用包后的操作，通过require获得echarts接口后（或者命名空间上）实例化图表，echarts接口仅有一个方法init
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));//容器对象，初始化接口、图表所在节点
var option1 = {//图表操作属性
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸发量', '降水量', '最低气温', '最高气温' ]//图例说明
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
xAxis : [
{
type : 'category',
position : 'bottom',
boundaryGap : true,
axisLine : { // 轴线
show : true,
lineStyle : {
color : 'green',
type : 'solid',
width : 2
}
},
axisTick : { // 轴标记
show : true,
length : 10,
lineStyle : {
color : 'red',
type : 'solid',
width : 2
}
},
axisLabel : {
show : true,
interval : 'auto', // {number}
rotate : 45,
margin : 8,
formatter : '{value}月',
textStyle : {
color : 'blue',
fontFamily : 'sans-serif',
fontSize : 15,
fontStyle : 'italic',
fontWeight : 'bold'
}
},
splitLine : {
show : true,
lineStyle : {
color : '#483d8b',
type : 'dashed',
width : 1
}
},
splitArea : {
show : true,
areaStyle : {
color : [ 'rgba(144,238,144,0.3)',
'rgba(135,200,250,0.3)' ]
}
},
data : [ '1', '2', '3', '4', '5', {
value : '6',
textStyle : {
color : 'red',
fontSize : 30,
fontStyle : 'normal',
fontWeight : 'bold'
}
}, '7', '8', '9', '10', '11', '12' ]
},
{
type : 'category',
data : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
} ],
yAxis : [
{
type : 'value',
position : 'left',
//min: 0,
//max: 300,
//splitNumber: 5,
boundaryGap : [ 0, 0.1 ],
axisLine : { // 轴线
show : true,
lineStyle : {
color : 'red',
type : 'dashed',
width : 2
}
},
max : '500',
min : '0',
splitNumber : 10,
axisTick : { // 轴标记
show : true,
length : 10,
lineStyle : {
color : 'green',
type : 'solid',
width : 2
}
},
axisLabel : {
show : true,
interval : 'auto', // {number}
rotate : -45,
margin : 18,
formatter : function(value) {
return value + "ml";
}, // Template formatter!
textStyle : {
color : '#1e90ff',
fontFamily : 'verdana',
fontSize : 10,
fontStyle : 'normal',
fontWeight : 'bold'
}
},
splitLine : {
show : true,
lineStyle : {
color : '#483d8b',
type : 'dotted',
width : 2
}
},
splitArea : {
show : true,
areaStyle : {
color : [ 'rgba(205,92,92,0.3)',
'rgba(255,215,0,0.3)' ]
}
}

}, {
type : 'value',
splitNumber : 10,
axisLabel : {
formatter : function(value) {
// Function formatter
return value + ' °C'
}
},
splitLine : {
show : false
}
} ],
series : [//图例对应的数据
{
name : '蒸发量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ]
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ]
},
{
name : '最低气温',
type : 'line',
yAxisIndex : 1,
data : [ 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4,
23.0, 16.5, 12.0, 6.2 ]
},
{
name : '最高气温',
type : 'line',
xAxisIndex : 1,
yAxisIndex : 1,
data : [ 12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3,
33.4, 31.0, 24.5, 18.0, 16.2 ]
} ]
};
myChart.setOption(option1);

// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip : {
trigger : 'item',
formatter : '{b}'
},
series : [ {
name : '中国',
type : 'map',
mapType : 'china',
selectedMode : 'multiple',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : '广东',
selected : true
} ]
} ]
});

var myChart3 = ec.init(document.getElementById('mainPie'));
var option = {
title : {
text : '某站点用户访问来源',
subtext : '纯属虚构',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : false,
readOnly : false
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [ {
name : '访问来源',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : [ {
value : 335,
name : '直接访问'
}, {
value : 310,
name : '邮件营销'
}, {
value : 234,
name : '联盟广告'
}, {
value : 135,
name : '视频广告'
}, {
value : 1548,
name : '搜索引擎'
} ]
} ]
};
myChart3.setOption(option);
});
</script>
</body>
</html>