echarts的基本用法一、引入echarts二、使用echarts

125 阅读 0 评论 83 点赞

我是靠谱客的博主快乐蜜粉，这篇文章主要介绍echarts的基本用法一、引入echarts二、使用echarts，现在分享给大家，希望可以做个参考。

一、引入echarts

二、使用echarts

1、柱状图

2、折线图

3、饼状图

4、中国地图

异步请求的一个小栗子：

一、引入echarts

下载地址：http://echarts.baidu.com/download.html

可下载精简版或完整版

<script type="text/javascript" src="echarts.min.js"></script>

二、使用echarts

在绘图前需要为echarts准备一个具备高宽的DOM容器

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<!-- 柱状图bar -->
<div id="echarts_bar" style="width: 600px;height:400px;"></div>
<!-- 柱状图line -->
<div id="echarts_line" style="width: 600px;height:400px;"></div>
<!-- 饼状图pie-->
<div id="echarts_pie" style="width: 600px;height:400px;"></div>
<!-- 地图map-->
<div id="echarts_map" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

1、柱状图

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_bar'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

2、折线图

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_line'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

3、饼状图

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_pie'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'pie',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

4、中国地图

复制代码

第一步、写入随机数来测试数据：
function randomData() {
return Math.round(Math.random()*500);
}
第二部、写入数据
var mydata = [
{name: '北京',value: '100' },{name: '天津',value: randomData() },
{name: '上海',value: randomData() },{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },{name: '广东',value: randomData() },
{name: '青海',value: randomData() },{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },{name: '澳门',value: randomData() }
];
第三步、实例化option，配置属性，data置入数据
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '全国地图大数据',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
},
//配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
//省份名称
},
emphasis: {
show: false
}
},
data:mydata
//数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_map'));
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
第一步、写入随机数来测试数据：
function randomData() {
return Math.round(Math.random()*500);
}
第二部、写入数据
var mydata = [
{name: '北京',value: '100' },{name: '天津',value: randomData() },
{name: '上海',value: randomData() },{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },{name: '广东',value: randomData() },
{name: '青海',value: randomData() },{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },{name: '澳门',value: randomData() }
];
第三步、实例化option，配置属性，data置入数据
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '全国地图大数据',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
},
//配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
//省份名称
},
emphasis: {
show: false
}
},
data:mydata
//数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_map'));
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);

异步请求的一个小栗子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
var myChart;
$(function () {
load();
});
function load() {
require.config({
paths: {
//echarts: '../Scripts/Echartsjs'
echarts: '../Scripts/NewEcharts'
}
});
require(
[
'echarts',
'echarts/chart/bar'
//'echarts/chart/line'
//'echarts/chart/map'
],
DrawEchart
);
}
function DrawEchart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('EchartsDiv'));
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表
var option = {
tooltip: {
trigger: 'axis'
},
//color: '#66B3FF',
animation: false,
addDataAnimation: false,
calculable: true,
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01]
}
],
yAxis: [
{
splitLine: {
show: false
},//分隔线
//splitArea: { show: false },//分隔区域
type: 'category',
// data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
data:[]
}
],
series: [
{
name: '资源使用情况',
color: '#66B3FF ',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230]
data:[]
}
]
};
//通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: "/Report/GetVMUsedInfo",
dataType: "json", //返回数据形式为json
data: {rnd:Math.random()},
success: function(result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
option.yAxis[0].data = result.yAxis;
option.series[0].data = result.series;
myChart.hideLoading();
myChart.setOption(option);
}
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
});
//myChart.hideLoading();
//myChart.setOption(option);
}
</script>