Echarts-基础

最新推荐文章于 2024-05-27 09:54:14 发布

小蚂蚁有力量

最新推荐文章于 2024-05-27 09:54:14 发布

阅读量535

点赞数

一、Echats概念

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

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

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

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

5.ECharts官网：下载文档，找到里面的echarts.js文件，将其导入到HTML中；
https://echarts.baidu.com

<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>

二、ECharts标题组件

标题组件(title):
show: 是否显示
text: 标题文字
subtext: 子标题文字
left/top/right/bottom: 标题位置
borderColor: 边框颜色
borderWidth: 边框宽度

   // 设置图表的标题
        title: {
            show: true,
            text: 'ECharts 入门示例',
            subtext: "学习echarts",
            // left: 50,
            // top: 50
            borderWidth: 5,
            borderColor: "red"
        },

三、ECharts工具箱组件

工具箱组件(toolbox):
show: 是否显示
feature: 具体显示功能
saveAsImage: 保存图片
dataView: 数据视图
restore: 还原
dataZoom: 缩放视图
magicType: 动态类型切换

toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                },
                dataView: {
                    show: true
                },
                restore:{
                    show: true
                },
                dataZoom:{
                    show: true
                },
                magicType:{
                    type: ["bar", "line"]
                }
            }
        },

四、ECharts工具箱组件

工具箱组件(toolbox):
show: 是否显示
feature: 具体显示功能
saveAsImage: 保存图片
dataView: 数据视图
restore: 还原
dataZoom: 缩放视图
magicType: 动态类型切换

toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                },
                dataView: {
                    show: true
                },
                restore:{
                    show: true
                },
                dataZoom:{
                    show: true
                },
                magicType:{
                    type: ["bar", "line"]
                }
            }
        },

五、ECharts弹窗组件

弹窗组件(tooltip):
show: 是否显示
trigger:显示方式, axis X轴显示

数据标记
markLine: 标记线
最大值/最小值/平均值等
markPoint: 标记点
最大值/最小值/平均值等

tooltip:{
            show: true,
            trigger: "axis"
        },




series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            markPoint: {
                data: [
                    {type:"max", name:"最大值"},
                    {type:"min", name:"最小值"},
                ]
            },
            markLine: {
                data: [
                    {type:"max", name:"最大值"},
                    {type:"min", name:"最小值"},
                    {type:"average", name:"平均值"},
                ]
            }
        }]

六、ECharts饼状图

series: [{
            radius: "30%",  // 显示大小
            center: ["10%", "50%"],  // 显示位置
            type: 'pie',
            data: [
                {value: 123, name: "销量"},
                {value: 456, name: "产量"},
                {value: 789, name: "容量"},
            ],
        }]

-End