Echarts快速上手

最新推荐文章于 2024-04-16 11:16:21 发布

LUCKYDOG5678

最新推荐文章于 2024-04-16 11:16:21 发布

阅读量611

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/LUCKYDOG5678/article/details/121754214

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、Echarts介绍

Echarts就是一个js的可视化图表库，就用来在网页上画图表的。

2、Ececharts的代码都是写在script里面的

echarts的代码都是写在script里面的

核心分为4个步骤

1、准备一个盒子，放置图表

2、echarts实例化对象

3、设置option

4、将option配置给echarts实例化对象

<!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>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!--1、定义一个盒子，图表放在这个盒子里-->
<div id="box" style="width: 400px;height: 600px;border: 1px red solid;"></div>

<script>
   	     // 2、echarts实例化对象 
        var myChart = echarts.init(document.getElementById('box'))// 获取盒子的id
        // 3、设置option
	   // option是最核心的部分，一切修改都是在option里面改
        var option ={
            title:{
                text:'柱状图',// 图表标题
                link:'http://www.baidu.com',// 标题超链接
            },
            tooltip:{//提示框
                trigger:'item',
                formatter:'{b}<br>{c}'
            },
            xAxis:{// x轴
                type:'category',// 类目轴
                data:['A','B','D'],
            },
            yAxis:{// y轴
                type:'value',// 数值轴,不用写data，会调用series的data
            },
            series:[
                {
                    name:'语文',
                    type:'bar',// 图表类型，还可以写line、scatter、pie
                    data:[70,90,87]
                }
            ]
        }
	    //4、将option配置给echarts实例化对象
        myChart.setOption(option)
</script>
/body>
</html>

展示效果：

好了，这篇文章就结束了，最后做个小结：echarts是很好用的可视化图表工具，并且还有和python结合的pyecharts，而且很简单，option里不懂得配置项可以去官网查

立个flag：2022年前学完echarts！！！

LUCKYDOG5678

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts快速上手

1、Echarts介绍Echarts就是一个js的可视化图表库，就用来在网页上画图表的。2、Ececharts的代码都是写在script里面的echarts的代码都是写在script里面的核心分为4个步骤1、准备一个盒子，放置图表2、echarts实例化对象3、设置option4、将option配置给echarts实例化对象<!DOCTYPE html><html lang="en"><head> <meta cha
复制链接

扫一扫