Echarts的基本使用

最新推荐文章于 2024-05-22 10:05:28 发布

buhaisao321

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量646

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/buhaisao321/article/details/123621777

版权

ECharts 数据可视化柱状图前端开发 JavaScript

关键词由CSDN通过智能技术生成

<!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>

buhaisao321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>Do.
复制链接

扫一扫