Echarts继续整理

最新推荐文章于 2023-09-23 21:24:49 发布

Cool_so_cool

最新推荐文章于 2023-09-23 21:24:49 发布

阅读量454

点赞数

分类专栏： VUE.JS

本文链接：https://blog.csdn.net/Cool_so_cool/article/details/107761490

版权

VUE.JS 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

在这里插入图片描述

首先做表格一定会遇到这种，元素覆盖的情况对吧，折线就比柱状图层级高，这个情况下呢，我们就用到这个属性了，
zlevel:把多个元素放到不同canvas当中，目的是为了优化性能，用途：把页面中的不经常更新的元素单独放在canvel当中，
z：就是z-index相当于css的层级关系
直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        div{
            width: 1000px;
            height: 800px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <script src="./echarts.min.js"></script>
    <script>
        //zlevel:把多个元素放到不同canvas当中，目的是为了优化性能，用途：把页面中的不经常更新的元素单独放在canvel当中，
        //z：就是z-index相当于css的层级关系

        // console.log(echarts);
        //柱状图
        var myChart = echarts.init(document.getElementById('chart1'))//生成了一个实例
        // console.log(document.getElementById('chart1'))

        myChart.setOption({
            title:{
                id:'txt',
                show:'true',
                text:'柱状图\n',
                link:'https://www.w3school.com.cn/svg/svg_intro.asp',
                textStyle:{
                    color:'blue',
                    fontWeight :'normal',
                    fontFamily:'sans-serif',
                    fontSize:20,
                    lineHeight:30,
                    textBorderColor:'red'
                },
                subtext:'北京',

            },
            legend:{//图例
                data:['销量']//上面点击的图例的一个功能
            },
            xAxis:{//x轴销量
              data:['衬衫','羊毛衫','大山','裤子','袜子','试试']
            },
            yAxis:{//y轴即使是空也要写

            },
            series:{//系列表
                name:'销量',
                type:'bar',//图标类型
                data:[60,20,36,45,85,35]
            }
        })

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