JavaScript数据可视化——ECharts

最新推荐文章于 2025-04-21 19:26:40 发布

雪酒呀

最新推荐文章于 2025-04-21 19:26:40 发布

阅读量1.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js面向对象文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/Willow_Spring/article/details/121011559

js面向对象专栏收录该内容

13 篇文章

订阅专栏

ECharts的操作步骤

〇、参考文档

文档地址

一、基本操作步骤

（一）引入ECharts文件

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

（二）初始化ECharts实例

需要再html文件里面准备一个用于显示数据的demo

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));

（三）准备配置项

此处不做配置，仅述步骤

let options = {}

（四）使用指定的配置，显示图表

options ：第三步的配置项
myChart：第二部的实例对象

myChart.setOption(options )

二、通用配置项

各种图标(柱状，折现，扇形，饼图等)都通用的配置项

* 通用配置  --  所有图标都可以用
         * 标题：title
         * 提示：tooltip
         * 工具按钮：toolbox
         * 图例：legend
         *图例,用于筛选系列,需要和series配合使用

在这里插入图片描述

三、柱形图列举

(一) 按部就班，完成上述操作步骤

在这里插入图片描述

(二)配置详解

柱状图必要配置

X轴：xAxis === 格式：对象
Y周：yAxis === 格式：对象
系列：series === 格式：数组
如图：共需五步

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 一 -->
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 二、 -->
    <div id="bar" style="width: 500px;height: 300px;"></div>
    <script>
        // 三
        let myChart = echarts.init(document.getElementById('bar'));

        // 四
        let opt = { 
            xAxis:{ 
                type:'category',//类目类型
                // X轴的数据
                data:["语文",'数学','英语']
            },
            yAxis:{ 
                type:'value',//值
            },
            series:[
                {
                    type:'bar',
                    name:'成绩表',
                    data:[100,98,120]
                }
            ]
        }

        // 五
        myChart.setOption(opt)
    </script>
</body>

</html>

注意点：数据写在series里面

结果
在这里插入图片描述

(三)配置项展示，后续图标同理

标题：title

格式：对象
参数
- text:标题
- subtext:子标题
注意点 title配置项是跟节点的，与x轴同级
代码

   // 四
        let opt = { 
            title:{
                text:'成绩表',
                subtext:'测试的成绩'
            },
            xAxis:{ 
                type:'category',//类目类型
                // X轴的数据
                data:["语文",'数学','英语']
            },
            yAxis:{ 
                type:'value',//值
            },
            series:[
                {
                    type:'bar',
                    name:'成绩表',
                    data:[100,98,120]
                }
            ]
        }

效果

提示：tooltip

依旧同级

提示框组件，主要有三个参数，具体参照文档
*** trigger 提示框的范围
*** triggerOn 提示框出现条件
*** formatter 格式化

 // 提示框组件
            tooltip: {
                // 提示框的范围
                trigger: 'axis',//item||axis
                // 提示框出现条件
                triggerOn: 'mousemove',//mousemove || click
                // 格式化
                // formatter:'{b}的{a}是{c}',
                formatter: a => {
                    console.log(a);
                    return a[0].axisValue + '的' + a[0].seriesName + '是' + a[0].value
                }
            },

在这里插入图片描述

工具按钮：toolbox

主要有保存图片，区域缩放，数据视图，图标切换等等

 toolbox: {
                feature: {
                    dataZoom: {},
                    restore: {},
                    saveAsImage: {},
                    dataView: {},
                    magicType: {
                        type: ['line', 'bar', 'stack']
                    }
                }
            },

在这里插入图片描述

图例：legend

图例,用于筛选系列,需要和series配合使用

legend:{
                //名字要与series每项的name
                data:['成绩']
            },

可以在多个系列下使用
在这里插入图片描述

(四)柱状图的series配置

在系列series中配置

最大值最小值

markPoint

各个条目的数值

label

柱状的宽度

barWidth

平均值

markLine

barWidth

代码

series: [{
                name: '语文',
                // 图表类型
                type: 'bar',
                // Y轴数据
                data: [109, 45, 333],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值~' },
                        { type: 'min', name: '最小值~' },
                    ]
                },
                   // 平均值
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                // 柱状图显示每个条目上的数值
                label: {
                    show: true,//显示条目上的数值
                    rotate: 45,//数值显示的旋转角度
                    position: '',//标签的位置
                },
                barWidth: '30%',//柱状的宽度
            }