关于echarts的基本使用

最新推荐文章于 2024-05-28 11:11:34 发布

刘朋-程序猿

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/weixin_42528855/article/details/95628145

版权

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

刘朋-程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于echarts的基本使用

因为学校老师要做数据分析展示，要用到 echarts做图表，所以就了解了一下 echarts.额，这个是假数据的，没有用到 ajax，从数据库中读取的，以后写。1.首先要为 echarts准备一个 Dom 在 HTML 里：<div id="pie" style="width: 600px;he...
复制链接

扫一扫