echarts学习笔记

最新推荐文章于 2021-07-22 09:17:54 发布

爱喝冬瓜汤的外星人

最新推荐文章于 2021-07-22 09:17:54 发布

阅读量580

点赞数

分类专栏： js基础文章标签： echarts

本文链接：https://blog.csdn.net/qq_41893334/article/details/109112728

版权

文章目录

1.什么是ECharts

什么是ECharts?
ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上

什么是数据可视化?
也就是可以将数据通过图表的形式展示出来，

ECharts提供的图表类型
ECharts 提供了常见的折线图、柱状图、散点图、饼图、K线图，
用于统计的盒形图，
用于地理数据可视化的地图、热力图、线图，
用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，
还有用于 BI 的漏斗图，仪表盘，
并且支持图与图之间的混搭。

ECharts显示图表的原理
ECharts4.0之前, 底层是使用canvas标签来实现图表绘制的
ECharts4.0开始, 为了提升移动端性能, 还支持 SVG 渲染

ECharts官网
https://echarts.baidu.com

2.ECharts基本使用

CDN引入 : link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-ECharts基本使用</title>
    <!--1.导入ECharts插件-->
    <script src="js/echarts.js"></script>
</head>
<body>
<!--2.为ECharts准备一个容器-->
<div style="width: 600px; height: 400px"></div>
<script>
    /*3.拿到准备好的容器*/
    let oDiv = document.querySelector("div");
    /*4.创建一个ECharts对象*/
    let myCharts = echarts.init(oDiv);
    /*5.对ECharts进行一些配置*/
    let option = {
    
        // 设置图表的标题
        title: {
    
            text: 'ECharts 入门示例'
        },
        // 设置图表的图例
        legend: {
    
            data:['销量', '产量']
        },
        // 设置X轴上显示的数据
        xAxis: {
    
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
        yAxis: {
    },
        // 设置图表的数据
        series: [{
    
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },{
    
            name: '产量',
            type: 'bar',
            data: [50, 120, 136, 60, 40, 80]
        }]
    };
    /*6.将配置传递给ECharts*/
    myCharts.setOption(option);
</script>
</body>
</html>

3.标题组件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-ECharts标题组件</title>
    <!--1.导入ECharts插件-->
    <script src="js/echarts.js"></script>
</head>
<body>
<!--2.为ECharts准备一个容器-->
<div style="width: 600px; height: 400px; border: 1px solid #000;"></div>
<script>
    /*3.拿到准备好的容器*/
    let oDiv = document.querySelector("div");
    /*4.创建一个ECharts对象*/
    let myCharts = echarts.init(oDiv);
    /*5.对ECharts进行一些配置*/
    
    标题组件(title):
    show: 是否显示
    text: 标题文字
    subtext: 子标题文字
    left/top/right/bottom: 标题位置
    borderColor: 边框颜色
    borderWidth: 边框宽度
    
    let option = {
    
        // 设置图表的标题
        title: {
    
            show: true,
            text: 'ECharts 入门示例',
            subtext: "学习echarts",
            // left: 50,
            // top: 50
            borderWidth: 5,
            borderColor: "red"
        },
        // 设置图表的图例
        legend: {
    
            data:['销量', '产量']
        },
        // 设置X轴上显示的数据
        xAxis: {
    
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
        yAxis: {
    },
        // 设置图表的数据
        series: [{
    
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },{
    
            name: '产量',
            type: 'bar',
            data: [50, 120, 136, 60, 40, 80]
        }]
    };
    /*6.将配置传递给ECharts*/
    myCharts.setOption(option);
</script>
</body>
</html>

4.工具箱组件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-ECharts工具箱组件</title>
    <!--1.导入ECharts插件-->
    <script src="js/echarts.js"></script>
</head>
<body>
<!--2.为ECharts准备一个容器-->
<div style="width: 600px; height: 400px; border: 1px solid #000;"></div>
<script>
    /*3.拿到准备好的容器*/
    let oDiv = document.querySelector("div");
    /*4.创建一个ECharts对象*/
    let myCharts = echarts.init(oDiv);
    /*5.对ECharts进行一些配置*/
    
    工具箱组件(toolbox):
    show: 是否显示
    feature: 具体显示功能
        saveAsImage: 保存图片
        dataView: 数据视图
        restore: 还原
        dataZoom: 缩放视图
        magicType: 动态类型切换
    
    let option = {
    
        toolbox: {
    
            show: true,
            feature: {
    
                saveAsImage: {
    
                    show: true
                },
                dataView: {
    
                    show: true
                },
                restore:{
    
                    show: true
                },
                dataZoom:{
    
                    show: true
                },
                magicType:{
    
                    type: ["bar", "line"]
                }
            }
        },
        // 设置图表的标题
        title: