您的位置：首页 > 其它

关于echarts的基本使用

2019-07-12 17:00 381 查看

因为学校老师要做数据分析展示，要用到 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航