以HTML页面为例 

    1. <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
    3.  <style>
    4.   //设置容器大小
    5.     #main{
    6.       width: 600px;
    7.       height: 600px;
    9.     }
    10.   </style>
    11. // 为ECharts准备一个容器，用来存放ECharts
    12. <body>
    13.   <div id="main"></div>
    14. </body>
    16. <script>
    17.     ## 初始化一个echarts实例
    18.     ## echarts.init() 这是初始化实例的方法
    19.     var myECharts = echarts.init(document.getElementById("main"))
    21.     ## 配置echarts图表中的数据
    22.     var options= {
    23.       title:{
    24.         title:"echarts图表标题"
    25.       },
    26.       tooltip:{},
    27.       legend:{
    28.         data:["销量"]
    29.       },
    30.       xAxis:{
    31.         data:["宝马","奔驰",'凯迪拉克','雷克萨斯','奥迪','本田','大众','吉利']
    32.       },
    33.       yAxis:{},   //y轴坐标
    34.       series:{
    35.         name:"每月销量",   //产品展示类型
    36.         type:"bar",   //决定图表以哪种形式表示，如：柱状图，折线图，扇形图
    37.         data:[50,156,45,37,98,65,154,87] //产品展示值
    38.       }
    39.     };
    40.     ## 使用指定的配置项和数据展示图表
    41.     myECharts.setOption(options)
    42. </script>

    效果图
    2021-09-23_141306.png