简介:
首先简单介绍一下,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。
下载:
官网下载:下载 - Apache ECharts
引入:
<script src="js/echarts.js"></script>
汉化包:
<script src="js/langZH.js"></script>
使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts/dist/echarts.js"></script>
<!-- 汉化包 -->
<script src="js/echarts/i18n/langZH.js"></script>
<style>
/* #main {
width: 800px;
height: 600px;
border: 1px solid red;
} */
</style>
</head>
<body>
<div id="main"></div>
<script>
// 获取id
var main = document.getElementById("main");
// 初始化图表
// 第一种情况,设置了宽高
// var myEcharts = echarts.init(main);
// 第二种情况 未设置宽高
var myEcharts = echarts.init(main, null, {
width: "auto",
height: 600
});
// 设置数据及格式
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 关联echarts
myEcharts.setOption(option);
// 响应式
window.onresize = function() {
myEcharts.resize();
}
</script>
</body>
</html>
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
<style>
/* #main {
width: 800px;
height: 600px;
border: 1px solid red;
} */
</style>
</head>
<body>
<div id="main"></div>
<script>
// 获取id
var main = document.getElementById("main");
// 初始化图表
// 第一种情况,设置了宽高
// var myEcharts = echarts.init(main);
// 第二种情况 未设置宽高
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
});
// 设置数据及格式
var option = {
title: {
show: true,
texte: "降水量/温度"
},
legend: {},
dataset: {
source: [
['月份', '平均最高气温', '平均最低气温', '平均气温'],
['1月', 2.7, -8, -3.7],
['2月', 4.9, -5, -0.7],
['3月', 11.3, 1, 5.8],
['4月', 20.2, 8, 14.2],
['5月', 26.2, 13.8, 19.9],
['6月', 30.1, 17.9, 24.4],
['7月', 31.2, 22.3, 26.2],
['8月', 29.7, 21.6, 24.8],
['9月', 26.5, 15.3, 20.0],
['10月', 18.8, 7.8, 13.1],
['11月', 10, 0, 4.6],
['12月', 3.8, -6.2, -1.5]
]
},
xAxis: {
type: 'category',
name: "月份"
},
yAxis: [{
type: 'value',
name: '平均最高气温',
max: 40,
min: -10,
}, {
type: 'value',
name: '平均最低气温',
max: 40,
min: -10,
}, {
type: 'value',
name: '平均气温',
max: 40,
min: -10,
}],
series: [{
type: 'bar',
yAxisIndex: 0
}, {
type: 'bar',
yAxisIndex: 1
}, {
type: 'line',
yAxisIndex: 2
}]
};
// 关联echarts
myEcharts.setOption(option);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
<!-- 汉化包 -->
<script src="js/langZH.js"></script>
<style>
/* #main {
width: 800px;
height: 600px;
border: 1px solid red;
} */
</style>
</head>
<body>
<div id="main"></div>
<script>
// 获取id
var main = document.getElementById("main");
// 初始化图表
// 第一种情况,设置了宽高
// var myEcharts = echarts.init(main);
// 第二种情况 未设置宽高
var myEcharts = echarts.init(main, null, {
width: 800,
height: 600
});
// 设置数据及格式
var option = {
title: {
show: true,
text: "产品销量图"
},
legend: {},
dataset: {
source: [
['季度', '销量', '销售额'],
['第一季度', 362, 94.12],
['第二季度', 711, 167.1],
['第三季度', 189, 48.2],
['第四季度', 468, 112.32],
]
},
xAxis: {
type: 'category'
},
yAxis: [{
type: 'value',
name: "销量",
min: 100,
max: 1000,
splitNumber: 5,
interval: 150,
axisLabel: {
formatter: "{value}件",
fontsize: 20
}
}, {
type: 'value',
name: "销售额",
min: 0,
max: 180,
interval: 30,
axisLabel: {
formatter: "{value}万元",
fontsize: 20
},
}],
series: [{
type: 'line',
yAxisIndex: 0,
label: {
show: true,
position: 'top'
},
}, {
type: 'line',
yAxisIndex: 1,
smooth: true,
label: {
show: true,
position: 'top'
},
}],
};
// 关联echarts
myEcharts.setOption(option);
</script>
</body>
</html>