因为学校老师要做 数据分析展示,要用到 echarts做图表,所以就了解了一下 echarts.
额,这个是假数据的,没有用到 ajax,从数据库中读取的,以后写。
1.首先 要为 echarts准备一个 Dom 在 HTML 里:
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="pie" style="width: 600px;height:400px;"></di>
在 HTML 里 可以只有他一个。
2.引入 echarts.js 文件:
<script src="js/echarts.common.min.js"></script>(本地的) <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>(链接的)
这两个都可以。
3.接下来要在 <script> </script> 里面写 :
3.1首先 要 基于准备好的 Dom,初始化 echarts 实例:
var pieCharts = echarts.init(document.getElementById("pie"));//注意:pie是 html 中 为echarts准备的div的id名称。
3.2:然后 指定 图表的配置项 和 数据:(echarts的官网上 一般也只给你 option)
//这个就是从官网上 拷贝的
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
4.使用 刚刚指定的配置项 和数据 显示 图表:
pieCharts .setOption(option);
这样就可以了.(如果你想从echarts官网上下载,注意:只有 option 配置项,不是全部的,所以你要按照刚才的步骤 进行才可以。 )
全部源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSDemo</title> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script> </head> <body> <div> <div id="pie" style="width: 600px;height:400px;"></di> </div> <script type="text/javascript" > var pieCharts = echarts.init(document.getElementById("pie"));//注意:pie是 html 中 为echarts准备的div的id名称。 option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220] } ] }; pieCharts .setOption(option); </script> </body> </html>