前端基础文章打卡Day2 : echarts数据可视化｜ 青训营

千阳191
117 阅读2分钟

前端基础青训营文章打卡：Day2

了解到项目一需要的技术栈需要数据可视化，根据文章内容给出来的数据可视化工具，我选择性学习了一下echarts，总结一下所学内容

一.引入echats文件

首先需要在echarts官方下载对应的文件包(下载 - Apache ECharts)
其次将下载好文件包之后将echarts文件引入到JS中 <script src="../echarts-5.4.3/dist/echarts.min.js"></script>
也可以使用node中npm直接下载
先在一个文件夹集成终端中输入npm init -y生成一个package.json文件，然后再输入npm install echarts直接下载文件，最终通过requie接收echarts文件

二.初始化echarts

首先我们需要一个div盒子用来容纳echarts的内容，同时进行初始化

<body>
    <div style="width: 500px; height: 500px;"></div>
    <script>
        const myChart = echarts.init(document.querySelector('div'))
    </script>
</body>

这样我们就拿到了一个容纳echarts的盒子，接下来就是echarts的核心内容。

三.配置echarts

配置echarts是核心内容，通过配置可以实现各种各样的样式。 下面是一段柱状图的配置代码

let option = {
            xAxis: {
                type:'category',//代表x轴的数据类型
                data:['小米','小王','多大']//x轴的数据内容
            },//xAxis代表对x轴的配置
            yAxis:{
                type:'value'//y轴的数据类型
            },
            series:[
                {
                    name:'yuwen',//系列名称
                    type: 'bar',//图表的种类
                    data:[70,90,80],//数据
                    itemStyle:{
                        color:'skyblue'
                    }//图表柱形的颜色
                }
            ]
        }

配置之后赋值给echartsmyChart.setOption(option)
下面是整体运行后的效果

联想截图_20230727210936.png

总结常用的配置：
1.option.series.tpye：'pie/bar/pie/tree' 其中type对应不同的图表类型
2.option.series.lable.show = true，显示数值

联想截图_20230727213749.png

3.option.series.itemsStyle{}设置柱条样式，包括：
  • 柱条的颜色（color）；
  • 柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
  • 柱条圆角的半径（barBorderRadius）；
  • 柱条透明度（opacity）；
  • 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
  1. option.tooltip.trigger:'item'显示数据内容

联想截图_20230727212603.png

5.option.axisPointer.show = ture
坐标指示器显示

联想截图_20230727233915.png


神奇的配置还有好多，统统可以在官方的配置文档中看到(https://echarts.apache.org/zh/option.html#title)

四.更换echarts主题

echarts官方同样有好多echarts主题，可以一键配置图形的颜色和坐标样式
主题更换需要在官网下载相应的主题歌JS文件，然后在自己的文件中引入进去，之后在echarts初始化的时候加入此主题。

<body>
    <script src="../theme/dark.js"></script>
    <div style="width: 500px; height: 500px;"></div>
    <script>
        const myChart = echarts.init(document.querySelector('div'),'dark')

直接在初始化第二个参数的位置填入主题名字方可更换主题。

联想截图_20230727234617.png

总结

经过一天的学习，发现我们现在已经站在了巨人的肩膀上面，前辈们写出来的工具库都非常功能强大，echarts的配置文档我钻研了整整一天，才仅仅看了一点点的内容。里面的不同配置，从简单的图表类型，文字内容，文字样式，到细节方面的动画伸缩，还有功能强大的筛选，越学习越发现前人的公绩伟大，可能在我以后接触更多框架的时候会有更深刻的感受。

avatar
文章
阅读
粉丝