Echarts

最新推荐文章于 2024-11-15 19:51:40 发布
最新推荐文章于 2024-11-15 19:51:40 发布
阅读量165 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53943447/article/details/130748339
版权

ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1.1 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>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
     <!-- 准备一个容器：容器就是显示图标区域 -->
     <div></div>
</body>
</html>
<script>
     //基于准备好的DOM初始化echarts实例
     let dom = document.querySelector('div');
     //创建echarts实例
     let mycharts = echarts.init(dom);
     //指定图表的配置项与数据
     mycharts.setOption({
           //图表的标题
           title:{
               //主标题的设置
              text:'数据可视化',
              //子标题
              subtext:"echarts基本使用",
              //主标题的颜色
              textStyle:{
                  color:'cyan'
              },
              //设置标题位置
              left:'center'
           },
           //x轴的配置项
           xAxis:{
               //数据
               data:["衣服",'直播','游戏','电影']
           },
           //y轴的配置项
           yAxis:{
               //显示Y轴的线
               axisLine:{
                   show:true
               },
               //显示Y轴刻度
               axisTick:{
                   show:true
               }
           },
           //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
           series:[
                { 
                    //图表类型的设置
                    type:"bar",
                    //图表的数据 bar柱状图  line折线图 pie饼图
                    data:[10,20,30,40],
                    color:'red'
                }
           ]
     });
</script>

1.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>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
     <!-- 准备一个容器：容器就是显示图标区域 -->
     <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>
<script>
     //基于准备好的DOM初始化echarts实例
     let dom1 = document.querySelector('.box1');
     let dom2 = document.querySelector('.box2');
     //创建echarts实例
     let mycharts1 = echarts.init(dom1);
     let mycharts2 = echarts.init(dom2);
     //指定图表的配置项与数据
     mycharts1.setOption({
           //图表的标题
           title:{
               //主标题的设置
              text:'数据可视化',
              //子标题
              subtext:"echarts基本使用",
              //主标题的颜色
              textStyle:{
                  color:'cyan'
              },
              //设置标题位置
              left:'center'
           },
           //x轴的配置项
           xAxis:{
               //数据
               data:["衣服",'直播','游戏','电影']
           },
           //y轴的配置项
           yAxis:{
               //显示Y轴的线
               axisLine:{
                   show:true
               },
               //显示Y轴刻度
               axisTick:{
                   show:true
               }
           },
           //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
           series:[
                { 
                    //图表类型的设置
                    type:"bar",
                    //图表的数据 bar柱状图  line折线图 pie饼图
                    data:[10,20,30,40],
                    color:'red'
                }
           ]
     });
     //第二个图表的配置项
     mycharts2.setOption({
          title:{
              //主标题
              text:"折线图",
              left:'center',
              textStyle:{
                  color:'red'
              },
              subtext:'echarts基本使用',
              subtextStyle:{
                  color:'cyan'
              }
          },
          //x轴
          xAxis:{
               data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
          },
          yAxis:{},
          //图表类型与数据
          series:[
              {
                   type:'line',
                   data:[10,20,15,44,2,19,100],
                   color:'cyan'
              }
          ]
     })
</script>

1.3 一个容器显示多个图标

在这里插入图片描述

<!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>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
     <!-- 准备一个容器：容器就是显示图标区域 -->
     <div></div>
</body>
</html>
<script>
     //基于准备好的DOM初始化echarts实例
     let dom = document.querySelector('div');
     //创建echarts实例
     let mycharts = echarts.init(dom);
     //指定图表的配置项与数据
     mycharts.setOption({
           //图表的标题
           title:{
               //主标题的设置
              text:'数据可视化',
              //子标题
              subtext:"echarts基本使用",
              //主标题的颜色
              textStyle:{
                  color:'cyan'
              },
              //设置标题位置
              left:'center'
           },
           //x轴的配置项
           xAxis:{
               //数据
               data:["衣服",'直播','游戏','电影']
           },
           //y轴的配置项
           yAxis:{
               //显示Y轴的线
               axisLine:{
                   show:true
               },
               //显示Y轴刻度
               axisTick:{
                   show:true
               }
           },
           //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
           series:[
            //柱状图    
                { 
                    //图表类型的设置
                    type:"bar",
                    //图表的数据 bar柱状图  line折线图 pie饼图
                    data:[10,20,30,40],
                    color:'red'
                }
                ,
                // 折线图
                {
                    type:'line',
                    data:[10,20,30,40],
                    color:'pink'
                },
                //饼图
                {
                    type:'pie',
                    //饼图你可以显示文字，data写法如下
                    data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
                    //饼图的宽度与高度
                    width:150,
                    height:150,
                    //饼图位置
                    left:150,
                    top:100,
                    //饼图的半径
                    radius:25
                }
           ]
     });
</script>

1.4 数据集dataset的使用

在这里插入图片描述

<!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>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
     <!-- 准备一个容器：容器就是显示图标区域 -->
     <div></div>
</body>
</html>
<script>
     //基于准备好的DOM初始化echarts实例
     let dom = document.querySelector('div');
     //创建echarts实例
     let mycharts = echarts.init(dom);
     //数据集
     let data = [
         ["衣服",10,22,'x',10],
         ["直播",12,55,'y',60],
         ["游戏",16,44,'z',50],
         ["电影",19,32,'t',70],
     ]
     //指定图表的配置项与数据
     mycharts.setOption({
           //设置字符集
           dataset:{
              //数据源
              source:data
           },
           //图表的标题
           title:{
               //主标题的设置
              text:'数据可视化',
              //子标题
              subtext:"echarts基本使用",
              //主标题的颜色
              textStyle:{
                  color:'cyan'
              },
              //设置标题位置
              left:'center'
           },
           //x轴的配置项
           xAxis:{
               //数据
               data:["衣服",'直播','游戏','电影']
           },
           //y轴的配置项
           yAxis:{
               //显示Y轴的线
               axisLine:{
                   show:true
               },
               //显示Y轴刻度
               axisTick:{
                   show:true
               }
           },
           //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
           series:[
            //柱状图    
                { 
                    //图表类型的设置
                    type:"bar",
                    //图表的数据 bar柱状图  line折线图 pie饼图
                    // data:[10,20,30,40],
                    color:'red',
                    encdoe:{
                        y:1
                    }
                }
                ,
                // 折线图
                {
                    type:'line',
                    // data:[10,20,30,40],
                    color:'pink',
                    encode:{
                        y:2
                    }
                },
                //饼图
                {
                    type:'pie',
                    //饼图你可以显示文字，data写法如下
                    // data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
                    //饼图的宽度与高度
                    width:250,
                    height:250,
                    //饼图位置
                    left:150,
                    top:100,
                    //饼图的半径
                    radius:25,
                    encode:{
                        //饼图旁边的文字
                        itemName:3,
                        value:4
                    }
                }
           ]
     });
</script>

1.5 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 src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 400px;
            /* border: 1px solid black; */
        }
    </style>
</head>

<body>
    <!--准备容器  -->
    <div class="box"></div>
</body>

</html>
<script>
    //初始化echarts实例
    //获取容器
    let dom = document.querySelector('.box');
    //初始化echarts实例
    let mycharts = echarts.init(dom);
    //配置数据
    mycharts.setOption({
        dataZoom: {},
        //标题
        title: {
            text: "echarts组件"
        },
        xAxis: {
            data: ['游戏', '电影', "直播", '娱乐']
        },
        yAxis: {},
        series: [
            {
                name: "柱状图",
                type: "bar",
                data: [20, 30, 40, 50]
            }
            ,
            {
                name: "折线图",
                type: 'line',
                data: [30, 40, 50, 60]
            }
        ]
        ,
        //提示组件
        tooltip: {
            //提示框文字的颜色
            textStyle: {
                color: 'red'
            }
        },
        //系列切换组件
        legend: {
            data: ['柱状图', '折线图']
        },
        //工具栏组件
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {},
                dataZoom: {
                    yAxisIndex: "none"
                },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ["line", "bar"]
                },
                restore: {},

            }
        },
        //调整图标布局
        grid: {
            left: 30,
            right: 0,
        }
    })
</script>

1.6 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>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 准备一个容器：容器就是显示图标区域 -->
    <div></div>
</body>

</html>
<script>
    //基于准备好的DOM初始化echarts实例
    let dom = document.querySelector('div');
    //创建echarts实例
    let mycharts = echarts.init(dom);
    //一个坐标系:散点图
    mycharts.setOption({
        //标题
        title: {
            text: "一个坐标系"
        }
        ,
        //x轴
        xAxis: {
             type:'category'
        },
        yAxis: {},
        //散点图
        series: [
            {
                type: "scatter",
                //散点图的数据
                data: [
                    [10, 20],
                    [13, 66],
                    [50, 9],
                    [44, 22],
                    [15, 10]
                ]
            }
        ]
    });
</script>

1.7 多个坐标体系

在这里插入图片描述

<!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>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 准备一个容器：容器就是显示图标区域 -->
    <div></div>
</body>

</html>
<script>
    //基于准备好的DOM初始化echarts实例
    let dom = document.querySelector('div');
    //创建echarts实例
    let mycharts = echarts.init(dom);
    //双做标题
    mycharts.setOption({
        title: {
            text: "双坐标"
        },
        xAxis: {
            data: ['游戏', '直播', '经济', '娱乐']
        },
        yAxis: [
            {  //显示Y轴的线
                axisLine: {
                    show: true
                },
                //显示Y轴刻度
                axisTick: {
                    show: true
                }
            },
            {
                //显示Y轴的线
                axisLine: {
                    show: true
                },
                //显示Y轴刻度
                axisTick: {
                    show: true
                }
            }
        ],
        series: [
            {
                type: 'line',
                data: [10, 20, 30, 40],
                //用的是索引值为0的y轴
                yAxisIndex:1
            }
            ,
            {
                type: 'bar',
                data: [6, 10, 80, 20],
                //用的是索引值为1y轴
                yAxisIndex:0
            }
        ]
    })
</script>
赖皮.
关注
ECharts社区 合集整理
sanghongxv的博客
07-08 5万+
持续更新......
在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）
商务合作 | 共同学习 | 携手共进
01-05 9万+
在Vue项目中引入 echarts 3D 路径图 Flights GL； echarts依赖包的下载方式； echarts-gl依赖包的下载方式； jQuery依赖包的下载方式；
echarts下载
HenryXun的博客
11-16 6820
关于echarts下载，官网上有三种方法，我这里推荐使用第三种方法：选择需要的模块，在线定制下载。 可以自由选择需要的图表、坐标系、组件进行打包下载。 这里我选择的是5.2.2版本，并且选择了所有的图表、坐标系、组件，其他选项中包括的SVG渲染、兼容IE8、工具集和代码压缩都选择了，可谓是真全呐，哈哈~~~ 选择下载后，会loading一会儿，最后得到一份echarts.min.js文件 完成了，操作很方便。 ...
Echarts 技术学习指南：从入门到精通
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
03-25 3万+
掌握 Echarts 技术不仅要求扎实的基础知识，更需要结合实际应用场景深入探索和实践。希望这份指南能为您的 Echarts 学习之旅提供清晰的方向和实用的指导，祝您早日成为 Echarts 高手！
Echarts-修改x轴 y轴字体颜色、线的颜色、y轴单位字体颜色
热门推荐
Ghjkku的博客
04-23 17万+
//var myChart = this.$echarts.init(document.getElementById("echart-container_0")); //vue var myChart = echarts.init(document.getElementById("echart-container_0"));//jquery var option = { tooltip: { trigger: 'axis', axisPoi.
Echarts y轴相关配置
蓑笠翁
09-03 2万+
使用Echarts的坐标轴配置，如y轴位置，y轴偏移量、y轴刻度、y轴最大最小值、次刻度、轴间隔等；
ECharts官网地址
weixin_50680057的博客
10-05 2万+
https://echarts.apache.org/zh/index.html
echarts地图3D效果
qq_35973440的博客
02-27 6402
echart图表3D效果 利用gco
echarts 节点拖拽
weixin_43931625的博客
11-09 4028
echarts 节点拖拽
ECharts 饼状图颜色设置
qq_38778882的博客
05-10 1万+
ECharts 饼图颜色设置
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
ECharts2.2.7版本
04-23
ECharts 2.2.7 是一个基于 JavaScript 的开源可视化库，用于构建交互式的数据可视化图表。它由百度前端技术部开发和维护，提供了丰富的图表类型、灵活的配置选项和强大的交互功能，可以轻松地创建各种各样的图表，...
echarts文档离线
10-10
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，以及强大的交互功能和自定义选项，广泛应用于Web应用的数据展示。"echarts文档离线"指的是将...
echarts 全国地图json数据
08-25
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够满足各种数据可视化需求。在这个“echarts全国地图json数据”中，我们主要讨论的是...
推荐了多个详细的echarts资源
09-26
Echarts 资源大汇总 Echarts 是一个基于 JavaScript 的数据可视化图表库，由百度株式会社开发和维护，可以轻松地在网页中添加交互式的图表。下面是推荐的多个详细的 Echarts 资源，旨在帮助开发者快速上手 Echarts ...
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 519
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
Vue中的常用指令
m0_62388400的博客
11-12 1161
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
【前端基础】Javascript取整函数以及向零取整方式
警警的博客
11-11 733
在JavaScript中，有多种方式可以对数字进行取整操作，即去掉小数部分，只保留整数部分。在JavaScript中，有多种方法可以对数字进行取整操作。这些方法各有特点，适用于不同的场景。方法会去掉一个数字的小数部分，返回其整数部分，但不进行四舍五入。在处理数字时，会将操作数转换为32位整数，从而截断小数部分。每种方法都有其适用的场景和限制，选择时需根据具体需求进行权衡。也是一种按位取整的方式，效果与。类似，会截断小数部分。
网页作业9
最新发布
小派蒙的博客
11-15 407
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务中心</title> <style> * { mar
数据可视化大屏模板及echarts图表案例集锦
资源摘要信息:"ECharts是一种使用JavaScript编写的开源可视化库，它能够帮助开发者制作各种图表和数据可视化大屏。本资源包含了15套精美的数据可视化大屏模板和18个ECharts图表案例，涵盖了数据监测、数据统计、数据...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值