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'
                }
                ,
                // 折线图
                {
                    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>
Echarts之一个容器显示多个图表

猜你喜欢
