首页 前端知识 ECharts的讲解

ECharts的讲解

2024-02-23 11:02:50 前端知识 前端哥 210 813 我要收藏

目录

什么是数据可视化

ECharts的介绍

ECharts的特点

ECharts的基本使用

操作步骤

通用配置title的相关配置

通用配置tooltip的相关配置

触发类型:trigger

触发时机:triggerOn

​格式化:formatter

通用配置toolbox的相关配置

通用配置legend的相关配置

案例源码

小结

折线图常见效果

标记 

线条控制

​编辑填充风格

紧挨边缘

缩放:脱离 0 值比例

堆叠图

 案例源码


什么是数据可视化

  • 把数据以更直观的形式展现----图表
  • 可以清晰有效地传达与沟通信息
  • 可以帮助我们快速的获取隐藏在数据中的信息

ECharts的介绍

ECharts是一个使用JavaScript实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交换丰富,可高度个性化定制的数据可视化图表。

官网地址:https://echarts.apache.org/zh/index.html 

ECharts的特点

  • 它具有丰富的可视化类型,折线图,柱状图,饼图,K线图等等.....
  • 它可以支持多种数据格式,比如key-value数据格式,二维表,和TypedArray格式
  • 它可以支持流数据,对于超大的数据量而言,数据的本身就非常非常耗费资源了,而ECharts支持对数据的动态渲染,加载多少数据就渲染多少数据,这样一来就省去了漫长数据加载等待的时间,它也提供了增量渲染技术(只渲染变化的数据),从而提供资源的利用效率。
  • 还具有移动端的优化,跨平台的使用,绚丽的特效和三维可视化等等特点,感兴趣的同学可以访问这个网址:https://echarts.apache.org/zh/feature.html

小结 

ECharts的基本使用

操作步骤

  • 步骤1:引入echarts.js文件

  • 步骤2:准备一个呈现图表的盒子

  • 步骤3:初始化echarts实例对象

  • 步骤4:准备配置项

  • 步骤5:将配置项设置给echarts实例对象

echarts.js获取(此为链接,可点击发生跳转)

案例演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的尝试</title>
    <!-- 步骤1:引入echarts.js文件 -->
    <script src="./js/echarts.min.js"></script>
</head>
<!-- 
步骤1:引入echarts.js文件

步骤2:准备一个呈现图表的盒子

步骤3:初始化echarts实例对象

步骤4:准备配置项

步骤5:将配置项设置给echarts实例对象 -->

<body>
    <!-- 步骤2:准备一个呈现图表的盒子 -->
    <div id="changshi" style="width:600px; height:400px"></div>
    <script>
        // 步骤3:初始化echarts实例对象
        // 参数,dom,决定图表最终呈现的位置
        var chart = echarts.init(document.querySelector('#changshi'))
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛']
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        // 步骤4:准备配置项
        var option = {
            title: {
                text: '成绩',
                link: ' http://www.itcast.cn' //点击可以发生页面跳转
            },
            xAxis: {
                type: 'value' //数值轴
            },
            yAxis: {
                type: 'category', //类目轴
                data: xDataArr
            },
            series: [{
                name: '语文成绩',
                type: 'bar', //图表的类型,line就是折线图,pie就是饼图等等
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                },
                label: {
                 show:true,//显示数值
                 rotate:60,//可以让数值旋转60°,给用户带来不一样的体验
                 position:'top'//位置标签
                },
                barWidth:'30%',
                data: yDataArr
            }]
        };
        // 步骤5:将配置项设置给echarts实例对象
        chart.setOption(option)
    </script>
</body>

</html>

最初效果 

添加最值和平均值 

改变柱子的宽度和显示柱子的数值

将柱状图变为横向的(最终效果) 

小结

 

通用配置title的相关配置

文字样式textStyle;标题边框的宽度(borderWidth),颜色(borderColor)和圆角半径(borderRadius);标题位置(left,top,right和bottom)。

 

通用配置tooltip的相关配置

tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框 

触发类型:trigger

trigger:'item'

当鼠标滑在图表(图中红色矩形部分)之上,就会有提示框出现。

trigger:'axis' 

当鼠标滑在图表(图中红色矩形部分)之上,就会有提示框出现。

触发时机:triggerOn

triggerOn:'mouseover'

  

triggerOn:'click'

格式化:formatter

字符串模板

回调函数

  

 

咱们就是说,不会的话,或者忘记了,都可以去上文提到的官方文档中查询。

通用配置toolbox的相关配置

 

通用配置legend的相关配置

 

案例源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用配置</title>
    <!-- 步骤1:引入echarts.js文件 -->
    <script src="./js/echarts.min.js"></script>
</head>
<!-- 
步骤1:引入echarts.js文件

步骤2:准备一个呈现图表的盒子

步骤3:初始化echarts实例对象

步骤4:准备配置项

步骤5:将配置项设置给echarts实例对象 -->

<body>
    <!-- 步骤2:准备一个呈现图表的盒子 -->
    <div id="changshi" style="width:600px; height:400px"></div>
    <script>
        // 步骤3:初始化echarts实例对象
        // 参数,dom,决定图表最终呈现的位置
        var chart = echarts.init(document.querySelector('#changshi'))
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛']
        var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
        var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
        // 步骤4:准备配置项
        var option = {
            title: {
                text: '成绩展示',
                textStyle: {
                    color: 'red'
                },
                borderWidth: 5, //边框宽度
                borderColor: 'blue', //边框颜色
                borderRadius: 5, //边框圆角半径
                left: 50, //距离盒子的左侧50px
                top: 10, //距离盒子的上面10px
                link: ' http://www.itcast.cn' //点击可以发生页面跳转
            },
            tooltip: {
                // trigger: 'item'
                trigger: 'axis',
                // triggerOn:'mouseover'  //鼠标滑过图表时,便会弹出提示框,这是默认的
                triggerOn: 'click', //鼠标点击图表时,才会弹出提示框
                // formatter:'{b}的成绩是{c}'
                formatter: function (arg) {
                    console.log(arg) //控制台打印参数
                    return arg[0].name + '的分数是' + arg[0].data
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}, //导出图片的功能
                    dataView: {}, //数据视图
                    restore: {}, //重置
                    dataZoom: {}, //区域缩放
                    magicType: {
                        type: ['bar', 'line']
                    } //动态图表类型的切换
                }
            },
            legend:{
                data:['语文成绩','数学成绩']
            },//筛选系列
            xAxis: {
                type: 'category', //类目轴
                data: xDataArr
            },
            yAxis: {
                type: 'value' //数值轴
            },
            series: [{
                    name: '语文成绩',
                    type: 'bar', //图表的类型,line就是折线图,pie就是饼图等等
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    },
                    label: {
                        show: true, //显示数值
                        rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验
                        position: 'top' //位置标签
                    },
                    // barWidth: '30%',
                    data: yDataArr1
                },
                {
                    name: '数学成绩',
                    type: 'bar', //图表的类型,line就是折线图,pie就是饼图等等
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    },
                    label: {
                        show: true, //显示数值
                        rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验
                        position: 'top' //位置标签
                    },
                    // barWidth: '30%',
                    data: yDataArr2
                },
            ]
        };
        // 步骤5:将配置项设置给echarts实例对象
        chart.setOption(option)
    </script>
</body>

</html>

小结

折线图常见效果

标记 

  

线条控制

填充风格

紧挨边缘

缩放:脱离 0 值比例

 

堆叠图

堆积图是在普通面积图的基础上,将不同数据项一层层堆叠起来,每个数据系列的起始点是上一个数据系列的结束点,既能看到各数据系列的走势,又能看到整体的规模和不同数据项的占比情况。

两折线图堆叠前

 两折线图堆叠后

堆叠并填充后 

 案例源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图常见效果</title>
    <!-- 步骤1:引入echarts.js文件 -->
    <script src="./js/echarts.min.js"></script>
</head>
<!-- 
步骤1:引入echarts.js文件

步骤2:准备一个呈现图表的盒子

步骤3:初始化echarts实例对象

步骤4:准备配置项

步骤5:将配置项设置给echarts实例对象 -->

<body>
    <!-- 步骤2:准备一个呈现图表的盒子 -->
    <div id="changshi" style="width:600px; height:400px"></div>
    <script>
        // 步骤3:初始化echarts实例对象
        // 参数,dom,决定图表最终呈现的位置
        var chart = echarts.init(document.querySelector('#changshi'))
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛']
        var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300]
        var yDataArr1 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300]
        // 步骤4:准备配置项
        var option = {
            title: {
                text: '成绩展示',
                textStyle: {
                    color: 'red'
                },
                borderWidth: 5, //边框宽度
                borderColor: 'blue', //边框颜色
                borderRadius: 5, //边框圆角半径
                left: 50, //距离盒子的左侧50px
                top: 10, //距离盒子的上面10px
                link: ' http://www.itcast.cn' //点击可以发生页面跳转
            },
            tooltip: {
                // trigger: 'item',
                trigger: 'axis',
                // triggerOn:'mouseover'  //鼠标滑过图表时,便会弹出提示框,这是默认的
                // triggerOn: 'click', //鼠标点击图表时,才会弹出提示框
                // formatter:'{b}的成绩是{c}'
            //     formatter: function (arg) {
            //         console.log(arg) //控制台打印参数
            //         return arg[0].name + '语文的分数是' + arg[0].data
            //     }
             },
            xAxis: {
                type: 'category', //类目轴
                data: xDataArr
                // boundaryGap:false
            },
            yAxis: {
                type: 'value', //数值轴
                scale: true
            },
            series: [{
                    name: '语文成绩',
                    type: 'line', //图表的类型,line就是折线图,pie就是饼图等等
                    // markPoint: {
                    //     data: [{
                    //             type: 'max',
                    //             name: '最大值'
                    //         },
                    //         {
                    //             type: 'min',
                    //             name: '最小值'
                    //         }
                    //     ]
                    // },
                    // markLine: {
                    //     data: [{
                    //         type: 'average',
                    //         name: '平均值'
                    //     }]
                    // },
                    // markArea: {
                    //     data: [
                    //         [{
                    //             xAxis: '张三'
                    //         }, {
                    //             xAxis: '李四'
                    //         }],
                    //         [{
                    //             xAxis: '小明'
                    //         }, {
                    //             xAxis: '茅台'
                    //         }]
                    //     ]
                    // },
                    // smooth: true, //变成平滑的效果
                    lineStyle: {
                        color: 'green',
                        type: 'solid' //虚线的效果 dotted 点线  solid 实线(默认)
                    },
                    label: {
                        show: true, //显示数值
                        rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验
                        position: 'top' //位置标签
                    },
                    // barWidth: '30%',
                    // areaStyle: {
                    //     color: 'green'
                    // }, //面积填充
                    data: yDataArr,
                    stack:'all',
                    areaStyle:{}
                },
                {
                    name: '数学成绩',
                    type: 'line',
                    label: {
                        show: true, //显示数值
                        rotate: 60, //可以让数值旋转60°,给用户带来不一样的体验
                        position: 'top' //位置标签
                    },
                    data:yDataArr1,
                    stack:'all',
                    areaStyle:{}
                }
            ]
        };
        // 步骤5:将配置项设置给echarts实例对象
        chart.setOption(option)
    </script>
</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2541.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!