Echart:前端很好的数据图表展现工具+demo

时间:2022-08-23 21:27:54

官网:  http://echarts.baidu.com/index.html

通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行

demo1:

1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
</body>

2、新建<script>标签引入模块化单文件echarts.js

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

 

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts:
'http://echarts.baidu.com/build/dist'
}
});
</script>
</body>

4、<script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts:
'http://echarts.baidu.com/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: {
data:[
'销量']
},
xAxis : [
{
type :
'category',
data : [
"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type :
'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

5、浏览器中打开echarts.html,就可看到以下效果

Echart:前端很好的数据图表展现工具+demo

如果需要不同形式的图标,只更换option就可以了。

demo2:展示了更换option的图标。

1.代码:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts:
'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

option
= {
title : {
text:
'iphone销量',
subtext:
'纯属虚构',
x:
'center'
},
tooltip : {
trigger:
'item'
},
legend: {
orient:
'vertical',
x:
'left',
data:[
'iphone3','iphone4','iphone5']
},
dataRange: {
min:
0,
max:
2500,
x:
'left',
y:
'bottom',
text:[
'',''], // 文本,默认为数值文本
calculable : true
},
toolbox: {
show:
true,
orient :
'vertical',
x:
'right',
y:
'center',
feature : {
mark : {show:
true},
dataView : {show:
true, readOnly: false},
restore : {show:
true},
saveAsImage : {show:
true}
}
},
roamController: {
show:
true,
x:
'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name:
'iphone3',
type:
'map',
mapType:
'china',
roam:
false,
itemStyle:{
normal:{label:{show:
true}},
emphasis:{label:{show:
true}}
},
data:[
{name:
'北京',value: Math.round(Math.random()*1000)},
{name:
'天津',value: Math.round(Math.random()*1000)},
{name:
'上海',value: Math.round(Math.random()*1000)},
{name:
'重庆',value: Math.round(Math.random()*1000)},
{name:
'河北',value: Math.round(Math.random()*1000)},
{name:
'河南',value: Math.round(Math.random()*1000)},
{name:
'云南',value: Math.round(Math.random()*1000)},
{name:
'辽宁',value: Math.round(Math.random()*1000)},
{name:
'黑龙江',value: Math.round(Math.random()*1000)},
{name:
'湖南',value: Math.round(Math.random()*1000)},
{name:
'安徽',value: Math.round(Math.random()*1000)},
{name:
'山东',value: Math.round(Math.random()*1000)},
{name:
'*',value: Math.round(Math.random()*1000)},
{name:
'江苏',value: Math.round(Math.random()*1000)},
{name:
'浙江',value: Math.round(Math.random()*1000)},
{name:
'江西',value: Math.round(Math.random()*1000)},
{name:
'湖北',value: Math.round(Math.random()*1000)},
{name:
'广西',value: Math.round(Math.random()*1000)},
{name:
'甘肃',value: Math.round(Math.random()*1000)},
{name:
'山西',value: Math.round(Math.random()*1000)},
{name:
'内蒙古',value: Math.round(Math.random()*1000)},
{name:
'陕西',value: Math.round(Math.random()*1000)},
{name:
'吉林',value: Math.round(Math.random()*1000)},
{name:
'福建',value: Math.round(Math.random()*1000)},
{name:
'贵州',value: Math.round(Math.random()*1000)},
{name:
'广东',value: Math.round(Math.random()*1000)},
{name:
'青海',value: Math.round(Math.random()*1000)},
{name:
'*',value: Math.round(Math.random()*1000)},
{name:
'四川',value: Math.round(Math.random()*1000)},
{name:
'宁夏',value: Math.round(Math.random()*1000)},
{name:
'海南',value: Math.round(Math.random()*1000)},
{name:
'*',value: Math.round(Math.random()*1000)},
{name:
'香港',value: Math.round(Math.random()*1000)},
{name:
'澳门',value: Math.round(Math.random()*1000)}
]
},
{
name:
'iphone4',
type:
'map',
mapType:
'china',
itemStyle:{
normal:{label:{show:
true}},
emphasis:{label:{show:
true}}
},
data:[
{name:
'北京',value: Math.round(Math.random()*1000)},
{name:
'天津',value: Math.round(Math.random()*1000)},
{name:
'上海',value: Math.round(Math.random()*1000)},
{name:
'重庆',value: Math.round(Math.random()*1000)},
{name:
'河北',value: Math.round(Math.random()*1000)},
{name:
'安徽',value: Math.round(Math.random()*1000)},
{name:
'*',value: Math.round(Math.random()*1000)},
{name:
'浙江',value: Math.round(Math.random()*1000)},
{name:
'江西',value: Math.round(Math.random()*1000)},
{name:
'山西',value: Math.round(Math.random()*1000)},
{name:
'内蒙古',value: Math.round(Math.random()*1000)},
{name:
'吉林',value: Math.round(Math.random()*1000)},
{name:
'福建',value: Math.round(Math.random()*1000)},
{name:
'广东',value: Math.round(Math.random()*1000)},
{name:
'*',value: Math.round(Math.random()*1000)},
{name:
'四川',value: Math.round(Math.random()*1000)},
{name:
'宁夏',value: Math.round(Math.random()*1000)},
{name:
'香港',value: Math.round(Math.random()*1000)},
{name:
'澳门',value: Math.round(Math.random()*1000)}
]
},
{
name:
'iphone5',
type:
'map',
mapType:
'china',
itemStyle:{
normal:{label:{show:
true}},
emphasis:{label:{show:
true}}
},
data:[
{name:
'北京',value: Math.round(Math.random()*1000)},
{name:
'天津',value: Math.round(Math.random()*1000)},
{name:
'上海',value: Math.round(Math.random()*1000)},
{name:
'广东',value: Math.round(Math.random()*1000)},
{name:
'*',value: Math.round(Math.random()*1000)},
{name:
'香港',value: Math.round(Math.random()*1000)},
{name:
'澳门',value: Math.round(Math.random()*1000)}
]
}
]
};


// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

2.浏览器效果:

Echart:前端很好的数据图表展现工具+demo

 

 

更多option,请参考官方文档:http://echarts.baidu.com/echarts2/doc/example.html

备注:灵活使用,注意API的调用,echart是一个很好的图表展示工具。