ECharts复习一下

最新推荐文章于 2024-06-27 10:06:14 发布
最新推荐文章于 2024-06-27 10:06:14 发布
阅读量127 收藏
点赞数
分类专栏： Echars
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38998319/article/details/119154953
版权

1.ECharts可以干什么

实现数据可视化即图标

2.使用ECharts

1.引入cdn地址

https://www.bootcdn.cn/echarts/

选择相应的cdn在html页面中进行引入

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>

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>
    <!-- ​1.引入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
</head>
<style>
    /* 3.设置画布的宽高 */
    #box {
        width: 600px;
        height: 600px;
    }
</style>

<body>
    <!-- 2.给可视化图形准备一个画布 -->
    <div id="box"></div>
</body>
<script>
    // 4.初始化echarts,并说明要把图画到id为box的画布上
    let ec = echarts.init(document.getElementById('box'))

    // 5.配置项(写一些图形的数据和图形的类型以及各种属性)
    let option = {
        // x轴
        xAxis: {
            type: "category",
            data: ['刀', '枪', '手雷', '坦克', '飞机']
        },
        // y轴内容
        yAxis: {
            type: "value",

        },
        // 系列列表
        series: [{
                name: "7月份销量",
                type: "bar", //图形类型为柱状图
                // type: "line", //图形类型为折线图
                data: [341, 545, 231, 434, 1000], //该图形类型中的数据
            },
            {
                name: "6月份销量",
                type: "bar", //图形类型为柱状图
                // type: "line", //图形类型为折线图
                data: [241, 535, 211, 134, 1300], //该图形类型中的数据
            }
        ]

    }
    // 6.最后把配置项设置给echarts
    ec.setOption(option)
</script>

</html>

 运行结果

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>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let ec = echarts.init(document.getElementById('box'));
        /*
            川川~  未来半年工资情况
            [六月,七月,八月,九月,十月,十一月,十二月]
            [1200,3000,5000,1500,6000,6500,5000]
        */
        let option = {
           xAxis:{
                data:['六月','七月','八月','九月','十月','十一月','十二月'],
                type:"category"
            },
           yAxis:{
               type:"value"
           },
           series:[
               {
                   name:"下半年工资情况",
                   type:'bar',
                   data:[1200,3000,5000,1500,6000,6500,5000],
                   /*标注点*/
                   markPoint:{
                       data:[
                           {
                                name:"最大值",
                                type:"max"
                           },
                           {
                               name:"最小值",
                               type:"min"
                           }
                       ]
                   },
                   /*标注线*/
                   markLine:{
                       data:[
                           {
                               name:"平均值",
                               type:"average"
                           }
                       ]
                   },
                   /*让图表中显示数值*/
                   label:{
                    show:true,//true表示显示
                    position:'top',//文字显示位置
                    rotate:60//文字旋转60度
                   },
                   /*设置宽度*/
                   //barWidth:"30%"

               }
           ]

          
        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

实现x轴显示数据,y轴显示字段

<!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>
        #box {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        let ec = echarts.init(document.getElementById('box'));
        /*
            川川~  未来半年工资情况
            [六月,七月,八月,九月,十月,十一月,十二月]
            [1200,3000,5000,1500,6000,6500,5000]
        */
        let option = {
            // 1.-------让y轴显示字段-------------
            yAxis: {
                data: ['六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                type: "category"
            },
            // 2.--------让x轴显示数值--------------
            xAxis: {
                type: "value"
            },
            series: [{
                name: "下半年工资情况",
                type: 'bar',
                data: [1200, 3000, 5000, -1500, 6000, 6500, 5000],
                /*标注点*/
                markPoint: {
                    data: [{
                            name: "最大值",
                            type: "max"
                        },
                        {
                            name: "最小值",
                            type: "min"
                        }
                    ]
                },
                /*标注线*/
                markLine: {
                    data: [{
                        name: "平均值",
                        type: "average"
                    }]
                },
                /*让图表中显示数值*/
                label: {
                    show: true, //true表示显示
                    position: 'right', //文字显示位置
                    rotate: 20 //文字旋转60度
                },
                /*设置宽度*/
                //barWidth:"30%"

            }]


        }

        ec.setOption(option);
    </script>

</body>

</html>

 

临时代码

1.通用属性

<!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>通用属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let ec = echarts.init(document.getElementById('box'));
        /*
            川川~  未来半年工资情况
            [六月,七月,八月,九月,十月,十一月,十二月]
            [1200,3000,5000,1500,6000,6500,5000]
        */
        let option = {
           xAxis:{
                data:['六月','七月','八月','九月','十月','十一月','十二月'],
                type:"category"
            },
            yAxis:{
                type:"value"
            },
            //通用属性
            title:{
                text:"下半年工资",
                link:"http://www.baidu.com",
                textStyle:{
                    color:"orange"
                },
                backgroundColor:"pink"
            },
            //鼠标滑过显示的效果
            tooltip:{
                trigger:"axis",
                //formatter:"{a}<br>{b}:<span style='color:orange'>{c}</span>"
                formatter:(v)=>{
                    //4000垃圾  红色  绿色
                    if (v[0]['value'] <= 4000) {
                        return v[0]['seriesName']+"<br>"+v[0]['name']+":<span style='color:red'>"+v[0]['value']+"</span>";
                    } else {
                        return v[0]['seriesName']+"<br>"+v[0]['name']+":<span style='color:green'>"+v[0]['value']+"</span>";
                    }
                }
            },
            /*toolbox 工具栏*/
            toolbox:{
                feature:{
                    saveAsImage:{},  //另存为图片
                    dataView:{},      //数据视图
                    restore:{},         //重置按钮,
                    dataZoom:{},      //区域缩放
                    magicType:{        //切换表现形式
                        type:["line","bar"]
                    }
                }
            },
            /*legend  图例组件*/
            legend:{
                data:[{
                    name:"21年工资情况",  //此处的name必须跟下面的name对应
                    icon:"diamond"
                },{
                    name:"20年工资情况"
                }]
            },
            series:[
                {
                    name:"21年工资情况",
                    type:'bar',
                    data:[1200,3000,5000,1500,6000,6500,5000],
                    markLine:{
                        data:[
                            {
                                name:"平均值",
                                type:"average"
                            }
                        ]
                    }
                },
                {
                    name:"20年工资情况",
                    type:'bar',
                    data:[2200,3200,1500,1400,2000,1500,4000],
                   
                },
                {
                    name:"19年工资情况",
                    type:'bar',
                    data:[3200,2200,500,2500,7800,4500,5800],
                   
                }
            ]

          
        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

通用功能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>折线图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let ec = echarts.init(document.getElementById('box'));
        /*
            川川~  未来半年工资情况
            [六月,七月,八月,九月,十月,十一月,十二月]
            [1200,3000,5000,1500,6000,6500,5000]
        */
        let option = {
           xAxis:{
                data:['六月','七月','八月','九月','十月','十一月','十二月'],
                type:"category",
                boundaryGap:false
            },
            yAxis:{
                type:"value",
                //scale:true  //让起点不为0 , 适用于数据非常相近 ,又想观察细节的变化
            },
            
            series:[
                {
                    name:"21年工资情况",
                    type:'line',
                    data:[1130,5120,2190,4200,3210,2260,1080],
                    areaStyle:{
                        color:'lightblue'
                    },
                    smooth:true,
                    //堆叠图
                    stack:"aa"
                },
                
                {
                    name:"20年工资情况",
                    type:'line',
                    stack:"aa",// 堆叠图
                    data:[3130,3120,4190,5200,7210,1260,3080],
                    markPoint:{
                        data:[
                            {
                                name:"最大值",
                                type:"max"
                            },
                            {
                                name:"最小值",
                                type:"min"
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                name:"平均值",
                                type:"average"
                            }
                        ]
                    },
                    markArea:{
                        data:[
                            [{
                                xAxis:"八月"
                            },{
                                xAxis:"十一月"
                            }],
                        ]
                    },
                    //线条控制 平滑曲线
                    smooth:true,
                    lineStyle:{
                        color:'orange',
                        type:"dotted"
                    },
                    areaStyle:{
                        color:'gold'
                    },
                    itemStyle:{
                        color:'red'
                    }
                }
            ]

          
        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

散点图

<!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>散点图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let ec = echarts.init(document.getElementById('box'));
        
        var data = [{"gender": "female", "height": 161.2, "weight": 51.6 }, {"gender": "female", "height": 167.5, "weight": 59 }, {"gender": "female", "height": 159.5, "weight": 49.2 }, {"gender": "female", "height": 157, "weight": 63 }, {"gender": "female", "height": 155.8, "weight": 53.6 }, {"gender": "female", "height": 170, "weight": 59 }, {"gender": "female", "height": 159.1, "weight": 47.6 }, {"gender": "female", "height": 166, "weight": 69.8 }, {"gender": "female", "height": 176.2, "weight": 66.8 }, {"gender": "female", "height": 160.2, "weight": 75.2 }, {"gender": "female", "height": 172.5, "weight": 55.2 }, {"gender": "female", "height": 170.9, "weight": 54.2 }, {"gender": "female", "height": 172.9, "weight": 62.5 }, {"gender": "female", "height": 153.4, "weight": 42 }, {"gender": "female", "height": 160, "weight": 50 }, {"gender": "female", "height": 147.2, "weight": 49.8 }, {"gender": "female", "height": 168.2, "weight": 49.2 }, {"gender": "female", "height": 175, "weight": 73.2 }, {"gender": "female", "height": 157, "weight": 47.8 }, {"gender": "female", "height": 167.6, "weight": 68.8 }, {"gender": "female", "height": 159.5, "weight": 50.6 }, {"gender": "female", "height": 175, "weight": 82.5 }, {"gender": "female", "height": 166.8, "weight": 57.2 }, {"gender": "female", "height": 176.5, "weight": 87.8 }, {"gender": "female", "height": 170.2, "weight": 72.8 }, {"gender": "female", "height": 174, "weight": 54.5 }, {"gender": "female", "height": 173, "weight": 59.8 }, {"gender": "female", "height": 179.9, "weight": 67.3 }, {"gender": "female", "height": 170.5, "weight": 67.8 }, {"gender": "female", "height": 160, "weight": 47 }]
        let dataArr = [];
        for (let i = 0 ; i < data.length; i++) {
            let narr = [data[i]['height'],data[i]['weight']];  // [161.2,51.6]
            dataArr.push(narr);
        }

        let option = {
            
            xAxis:{
                type:'value',
                scale:true
            },
            yAxis:{
                type:'value',
                scale:true
            },
            series:[
                {
                    type:"effectScatter",
                    rippleEffect:{
                        scale:10
                    },
                    showEffectOn:"emphasis",
                    data:dataArr,
                    symbolSize:(v)=>{
                        //BMI=体重÷身高2。（体重单位：千克；身高单位：米。）
                        let bmi = (v[1]*10000)/(v[0]*v[0]);
                        if (bmi > 25) {
                            return 30
                        } else if (bmi < 20) {
                            return 10
                        }
                        return 20
                    },
                    itemStyle:{
                        color:(v)=>{
                            //BMI=体重÷身高2。（体重单位：千克；身高单位：米。）
                            let bmi = (v.data[1]*10000)/(v.data[0]*v.data[0]);
                            if (bmi > 25) {
                                return 'red'
                            } else if (bmi < 20) {
                                return 'yellow'
                            }
                            return "green"
                        }
                    }
                }
            ]

          
        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

 直角坐标系通用属性

<!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>直角坐标系通用属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>

        let ec = echarts.init(document.getElementById('box'));
        let option = {
            //配制直角坐标系
            grid:{
                show:true,
                borderWidth:10,
                backgroundColor:'pink',
                shadowColor:"grey",
                shadowBlur:10
            },
            //配制
            xAxis:{
                //type  data  scale 
                type:"category",
                data:["枪","哇哇","假牙","杯子","假发"]
            },
            yAxis:{
                type:"value"
            },
            //dataZoom
            dataZoom:[
                {
                    type:"inside"  //inside 通过滚轮缩放
                },
                {
                    type:"slider",  //slider  通过滑块进行缩放
                    xAxisIndex:0
                },
                {
                    type:"slider",  //slider  通过滑块进行缩放
                    yAxisIndex:0
                }
            ],
            //系列列表  --- 描绘图片具体是什么样子的 
            series:[
                {
                    name:"7月销量",
                    type:"line",  //bar 柱状图 
                    data:[341,678,123,98,1023]
                },
                {
                    name:"6月销量",
                    type:"bar",  //bar 柱状图 
                    data:[241,578,523,198,23]
                }
            ]
        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

 饼状图

<!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>饼状图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //统计 川川 一年内 购买商品的类别占比
        //军火 1000  奶茶 2300  吃饭 4500  生活 6000  情趣 10000 
        let ec = echarts.init(document.getElementById('box'));
        // 每一项必须是 name 和 value 
        let bdata = [
            {name:"军火",value:1000},
            {name:"奶茶",value:2300},
            {name:"零食",value:4500},
            {name:"生活",value:6000},
            {name:"情趣",value:10000},
        ]
        let option = {
            series:[
                {
                    name:"购买类别",
                    type:"pie",
                    data:bdata,
                    label:{
                        show:true,
                        formatter:(r)=>{
                            console.log(r)
                            return r['name']+":"+r['percent']+'%'
                        }
                    },
                    //radius:['50%','80%'] //[内圈半径,外圈半径] 可以制作圆环
                    roseType:"radius"  //南丁格尔图
                }
            ]

        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

 雷达图

<!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>雷达图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <script src="./vintage.js"></script>
    <style>
        #box{
            width:600px;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let ec = echarts.init(document.getElementById('box'),"vintage");
        //制定雷达图的配置项和每项数据的最大值
        let max = [
            {name:"输出",max:"100"},
            {name:"KDA",max:"100"},
            {name:"发育",max:"100"},
            {name:"团战",max:"100"},
            {name:"生存",max:"100"},
        ]

        //真正的数据
        let dd = [
            {name:"海峰",value:[90,85,78,56,34]},
            {name:"光哥",value:[50,95,88,16,94]},
        ]
        let option = {
            radar:{
                indicator:max,
                shape:"circle"
            },
            series:[
                {
                    type:"radar",
                    name:"个人素养",
                    data:dd,
                    label:{
                        show:true
                    },
                    areaStyle:{} 
                }
            ]
        }

        ec.setOption(option);

    </script>
    
</body>
</html>

 

子非鱼emma
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端(小程序) echarts图表 tooptip 层级过高导致弹层覆盖其他组件问题
闫瑞锋的博客
11-23 704
小程序使用echarts tooltip层级过高导致覆盖其他组件 解决方案
微信小程序echarts层级太高
dicuan0092的博客
09-04 3261
项目中因为需求，底部的tab导航栏是自己写的，在开发者工具中一切正常；但是在真机上页面滑动时，echarts的层级比tab高，调过两者的z-index后仍然如此。 经过查找后发现cover-view和cover-image替换tab的view后，可以解决以上的问题。 <!--底部公共tabBar--> <cover-view class="tabbar-con...
echarts层级过高遮挡其他组件问题
前端开发工程师博客
01-15 2580
微信小程序echarts层级过高 遮挡其他组件问题
解决Ucharts在小程序上的层级过高问题
最新发布
文龙刚的博客
06-27 460
在小程序开发工具上看着层级还是高，但是在手机上是正常的。开启2d渲染即可解决。
小程序中，echarts层级太高盖过了自定义时间组件问题
青春正在燃烧的博客
03-29 1250
1.使用echarts画了两个柱状图，结果盖过了自定义的时间组件，如图： 在网上找了各种解决方式都没起作用，最后还是想了个偏方解决的，方法是：在显示时间组件的时候隐藏echarts的图层，时间组件隐藏后显示echarts图层，完美解决 ...
echarts 等图表组件层级太高其它样式层级不生效
weixin_45554952的博客
06-14 1814
最近在页面设置一个悬浮图标，但是真机滑动的时候，曲线图遮住了悬浮图标 原代码 <view class="main_suspend" v-show="showSuspend"> <image class="suspend_img" :src="imgHost+suspendImg"></image> <image class="suspend_close" :src="imgHost + 'static/V2/comment/order/icon_close
这是一个Python大作业，用于信息可视化展示。综合Flask、echarts、爬虫、mysql等组件。.zip
06-14
适合大学生的Python学习笔记，复习巩固，大作业！！！
ssm框架+jsp+mysql实现的在线考试系统.zip
04-01
后端主要框架技术：spring+springMVC+mybatis+ECharts等等 数据库：mysql 开发工具：Myeclipse或Eclipse、jdk1.7或1.8、tomcat7或8、mysql5.5、5.6数据库。 注：有运行视频，运行文档 效果图请看这里： ...
艾宾浩斯遗忘曲线的利用
11-21
例如，在初次学习新单词后，应立即复习，然后在30分钟后再次复习，接下来的一天、两天、四天、七天和十五天分别进行复习。这样的复习策略可以显著提高背单词的效率，避免重复劳动，并且让单词更容易扎根于大脑。 ...
高级java笔试题-Documents:分享有关学习或其他方面的文件
06-03
高级java笔试题 Readme 提要 除了个别笔记是网络下载外（已注明），其它都是我自己学习过程中做的笔记，仍在更新，大部分都是手打，键盘都打掉色了呢！ 当然，有笔记是不够的，需要...Echarts Kettle 复习总结 复习计
计算机图形学期末试题
12-24
这份期末试题集包含了四套经典题型，是历年考试中常见的知识点，旨在帮助学生全面复习并掌握计算机图形学的核心概念和技术。 第一部分：基础理论 计算机图形学的基础包括颜色模型（如RGB、CMYK）、图像类型（位图和...
微信小程序：echarts层级太高，遮挡van-popup弹框组件
Wjk20011127的博客
05-24 297
1、使用hidden（注意，不能直接加在组件上，需要外层包裹一个view）
解决 Echarts 图 tooltip 层级太高穿透问题
前端程序媛_Ying博客
05-29 402
问题场景：Echarts 图 tooltip 是自动轮播的，当点击某个区域出现弹窗时，tooltip和弹窗同时显示，没在遮罩层下面，查看tooltip的层级显示99999，所以这里改一下tooltip的层级。设置 extraCssText: "z-index: 2;
使用echarts，里面的canvas层级太高怎么办
热门推荐
weixin_40918145的博客
07-03 1万+
一开始是想给被遮盖的地方用z-index最高级，发现没有用，后来给canvas绑定的id，给其第一个div设置z-index: 1，就可以解决了 #echarts>div{ z-index: 1 } ...
解决 echarts 层级太高 cover-view无效的问题
weixin_47124112的博客
03-02 2438
常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会。
微信小程序echart图表canvas层级太高覆盖解决办法
天天打码-16年老码农
04-25 1728
最近在使用echart图表时，发现滚动页面时，echart图表层级覆盖原生组件，设置z-index无效。发现原来的echarts-for-wx组件里有个方法。
解决echart图表层级太高 cover-view无效的问题
coca_cola_1105的博客
01-07 4128
解决echart图表层级太高 cover-view无效的问题 首先在这里贴下微信小程序使用echart的流程：（注意：这里要下载最新版的ec-canvas这里附上链接[https://github.com/ecomfe/echarts-for-weixin]这个最新的链接并且解决了图表模糊的问题。） 下面展示一些 echart使用案例。将legend的z设置成-1，将头部的cover-view的z-indez设置成99即解决了echart图表层级过高的问题。 import * as echarts from
【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件
weixin_41106665的博客
01-13 1238
【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件
解决echarts的tooltip框的层级比el-dialog的遮罩层的层级高的问题
qq_49698477的博客
06-05 285
echarts的tooltip框的层级比el-dialog的遮罩层的层级高，要让dialog的遮罩层显示在tooltip之上，可以在tooltip里面配置extraCssText:"z-indsex:9"注意：dialog的层级是2007。
介绍一下echarts
09-25
### 回答1： ECharts是一个基于JavaScript的开源可视化库，可以用来展现各种动态的图表和数据。它由百度开发并维护，拥有丰富的图表类型、可扩展性强、可视化效果优美等特点，在数据展示方面得到了广泛应用。ECharts支持各种主流浏览器，并且兼容性良好，易于使用。它的特点还包括可视化自定义、交互性、动态数据支持等，可以满足不同领域的数据可视化需求。 ### 回答2： Echarts是一个基于JavaScript的数据可视化库。它提供了丰富的图表展示功能，可以用于构建交互式的大数据可视化界面。Echarts支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图等等。用户可以根据需求选择适合的图表类型来呈现数据。 Echarts的使用非常灵活，可以在各种平台上进行开发和部署，包括网页、桌面应用和移动端APP。它支持各种主流浏览器，可以在各种设备上进行响应式设计。 Echarts提供了丰富的配置项，用户可以根据需要自定义图表的样式和布局。用户可以设置图表的标题、副标题、图例、坐标轴等，还可以自定义颜色、字体、背景等视觉效果。除了基本的配置项，Echarts还提供了丰富的扩展功能，比如数据区域缩放、数据筛选、图表切换等交互操作。 Echarts还具有强大的数据分析和图表展示能力。它支持对数据进行聚合、过滤和排序，可以进行数据可视化分析，提供多维度的数据展示。在图表的可视化展示上，Echarts提供了用户友好的交互操作和数据标注功能，使得用户可以更好地理解数据和发现它们背后的规律。 总之，Echarts是一个强大而灵活的数据可视化库，可以帮助用户快速构建交互式的图表界面，展示和分析数据。无论是在数据分析、商业报告还是数据展示方面，Echarts都是一个不可或缺的工具。 ### 回答3： ECharts是一个基于JavaScript的开源图表库，由百度开发和维护。它提供了丰富的数据可视化功能，可以在网页上创建各种图表，并以美观、交互性强和可定制性高而受到广泛喜爱。 ECharts支持包括柱状图、折线图、散点图、饼图、雷达图、地图等多种图表类型，可以满足不同业务场景下的数据可视化需求。它还支持多种数据格式的导入，包括CSV、JSON、XML等常用格式，方便用户导入和使用数据。 ECharts最大的特点是提供了丰富的交互功能，使得用户可以通过鼠标或触摸屏进行图表的放大、缩小、拖动和选择等操作。这样的交互性不仅提升了用户的数据分析和决策能力，还使得图表更加直观和易于理解。 此外，ECharts还具有高度的可定制性，用户可以根据自己的需求对图表进行各种样式和布局的调整，包括修改颜色、字体、线条样式等。同时，ECharts还提供了丰富的主题和样式模板，方便用户快速创建符合自己品牌形象的图表。 ECharts是基于HTML5技术开发的，支持在主流浏览器上运行，并且可以与其他前端框架（如React、Vue等）无缝集成。同时，ECharts还提供了全面的API文档和示例，使得开发者可以轻松地使用和定制图表。 总之，ECharts作为一款功能强大、灵活性高的图表库，已被广泛应用于数据可视化领域。无论是在商业分析、金融可视化、实时监控、大数据展示等领域，ECharts都可以提供可靠、高效、美观的数据可视化解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值