echarts工具的介绍和使用

最新推荐文章于 2025-03-26 09:53:40 发布

原创最新推荐文章于 2025-03-26 09:53:40 发布 · 2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了echarts，一个用于大数据可视化的图表工具。内容包括：echarts的初始化、图标类型配置（如line和pie）、主题背景颜色设定、调色板管理、渐变颜色配置、特殊样式（如label标签和富文本rich）、工具箱功能、动态图设计及缓冲动画的设置。通过丰富的示例和官方文档链接，帮助读者深入理解和运用echarts。

介绍：echarts 是一个可视化图表工具，主要用于展示图标的（大数据可视化）

用法

1 echarts初始化

步骤：导入js，创建容器，设置容器样式，实例化echarts

<script src="./js/echarts.min.js"></script>
    <style>
        #container{
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    // 实例化echarts
    var echart =echarts.init(document.getElementById("container"),"主题颜色")
    //定义配置项
    var option={
        color:["#55aaff","#aaff7f","#55007f","#ffff00"],
        title:{
            text:"我的第一个图标"
        },
        tooltip:{},     //图表提示
        legend:{data:["睡眠时长","游戏时长","工作时长"]},        //图例名称
        xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},//x轴线
         yAxis:{}, //y轴线
        //设置数据
        series:[
            {
            //数据名称
            name:"睡眠时长",
            type:"bar",
            data:[8,10,4,5,9,4,8]
        },
            {
            //数据名称
            name:"游戏时长",
            type:"line",
            smooth:true,
            // areaStyle:{color:"red"},
            data:[5,7,8,2,7,9,3]
        },
            {
            //数据名称
            name:"工作时长",
            type:"bar",
            smooth:true,
            data:[2,6,6,4,10,2,0]
        },
            {
            //数据名称
            name:"成绩",
            type:"pie",
            //圆半径和镂空半径
            radius:[80,50],
            //位移
            left:-100,
            top:-200,
            data:[
                {name:"js",value:90,itemStyle:{color:"red"}},
                {name:"html",value:50,itemStyle:{
                    normal:{color:"skyblue"},
                    emphasis:{color:"red"}
                }},
                {name:"vue",value:60},
            ]
        },
    ]
    }
    //更新配置
    echart.setOption(option)
</script>

2 图标的其他属性

type ：line/type：pie 显示为线性或者圆饼型；区域填充的颜色areaStyle:fill(“#ccc”) 在这里插入图片描述
饼型图的配置：radiius（半径，镂空半径）

3 主题背景颜色的配置

基础颜色配置是light，dark，直接在实例化的后边添加颜色属性在这里插入图片描述
也可引入外部的主题颜色背景https://echarts.apache.org/zh/theme-builder.html#acc-visualmap-body

4调色板

通过color属性控制总体图标的颜色和某个图标的颜色，多个值，代表多种颜色组合在这里插入图片描述

5渐变颜色的配置

6 特殊样式

label标签
show：true是否显示
position：”insideRight“位置
formatter格式
formatter: “{a}\n{c}分”
{a}系列名，{b}数据名，{c}数值，{d}百分百，在这里插入图片描述

7。富文本rich

动态显示局部
定义option
修改option值
echart.setOption(option);更新数据和视图![在这里插入图片描述](https://img-blog.csdnimg.cn/3c2017f11bc749cf9d855d72d0aabfb3.png)

在这里插入图片描述

8.工具箱

9动态图的设计

10.缓冲动画动画延迟

动画延迟在这里插入图片描述

动画时长在这里插入图片描述
动画缓动函数：animationEasing:“bounceInOut”
弹性布局

时间的监听
echart.on（”事件名“，处理函数）

发送事件dispatchAction
更多详细用法可参考官方文档：https://echarts.apache.org/zh/index.html

标签

#echarts #javascript #ecmascript