数据可视化echarts图表库如何使用和配置？

最新推荐文章于 2023-02-16 15:54:41 发布

其实也没有

最新推荐文章于 2023-02-16 15:54:41 发布

阅读量381

点赞数 1

文章标签：数据可视化 js echarts svg

本文链接：https://blog.csdn.net/lb191258514/article/details/116666151

版权

数据可视化echarts图表库如何使用和配置？

Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上

1.Echarts的优点：

1、国人开发，文档全，便于开发和阅读文档。

2、图表丰富，可以适用各种各样的功能。

3.开源、免费

2.Echarts使用

1.下载要使用的Echarts图表库到项目中

下面是使用的下载js文件格式引入到项目中

官方地址：http://echarts.apache.org/zh/

2.在项目中引入配置

<!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>Document</title>
    <style>
        #box{
            width: 100%;
            height: 400px;
            border: 1px solid slategrey;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <!-- 在项目中引入下载的echarts.js -->
    <script src="./echarts.js"></script>
    <script>
        // 获取dom
        let box=document.getElementById('box')
        // 初始化echarts对象
        let myEchart=echarts.init(box)
        // 配置图表对象
        let options={
            // x轴的参数配置
            xAxis:{
                data:['上衣','裤子','毛衣','鞋子']
            },
            // y轴的参数配置
            yAxis:{

            },
            //series表示这一行数据以什么实现
            series:[
                    {type:'bar',data:[100,200,300,400]}
            ]
        }
        // 配置好的参数指定给图表的对象
        myEchart.setOption(options)
    </script>
</body>
</html>

只需要简单的这些配置，我们的图表就可以显示使用

在这里插入图片描述

2.1如何更换如何更换Echarts主题样式

有时候我们想要不一样的主题配合自己的项目，我们可以去下载自定义的主题配置

第一步：打开主题编辑器,在线编辑你需要的主题 ,你可以自定义修改你的主题
地址：https://echarts.apache.org/zh/theme-builder.html

在这里插入图片描述

第二步：编辑完点击下载主题js

建议使用js版本的主题，可以方便自己后期修改

在这里插入图片描述

第三步：在需要图表的页面中引入其js主题文件

  <script src="./customed.js"></script>

第四步：在初始始化图表中第二个参数配置主题名

 let myEchart=echarts.init(box,'customed')
 //在初始化中引入的主题名字来源于你下载的主题js文件中的下图标记的变量，如果你想使用其他变量名可以自定义修改，但是必须保持两边一致

在这里插入图片描述

2.2多系列数据图表

如果你的图表中需要柱形图和折线图或者是饼状图，也可以进行配置

 //series表示这一行数据以什么实现
            series:[
                // 柱形图
                    {name:'种类',type:'bar',data:[100,400,300,100]},
                // 饼图
                    {type:'pie',
                    name:'群体',
                    radius:['20%','40%'],
                    // color:['red','green'],
                    data:[
                    {name:'童装',value:70},
                    {name:'成人',value:40}
                     ],
                     width:400,        
                     },
                // 折线图
                    {
                       type:'line',
                       data:[100,400,300,100] 
                    }
            ]