zoukankan      html  css  js  c++  java
  • echarts基本使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>echarts 基本使用</title>
        <style>
            #box {
                 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <!-- 2.容器 -->
        <div id="box"></div>
        <!-- 1.引入echarts.js -->
        <script src="libs/echarts.js"></script>
        <script>
            // 3.初始化echarts对象
            function initEcharts(selector){
                const box = document.querySelector(selector)
                if(box) return echarts.init(box)
                return
            }
            
            var mecharts = initEcharts('#box')
            if(!mecharts) alert('echarts实例初始化失败!')
            // 4.准备配置项
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['小明','小红', '小王']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '语文',
                        type:'bar',
                        data: [70, 92, 87]
                    }
                ]
            }
            //5.设置echarts对象的配置项
            mecharts.setOption(option)
        </script>
    </body>
    </html>
    

      

    1.引入echarts.js
    2.准备容器 
    3.初始化echarts对象: 
      使用echarts.init(selector), 返回一个echarts对象
      【参考:https://echarts.apache.org/zh/api.html#echarts.init】
    4.准备配置项  
      【参考:https://echarts.apache.org/zh/option.html#title】
    5.设置echarts对象的配置项:echartsObj.setOption(optionObj)  
      【参考:https://echarts.apache.org/zh/api.html#echartsInstance.setOption】
  • 相关阅读:
    生成器
    IO调度算法
    进程与线程
    磁盘阵列(RAID)实例
    KVM虚拟化技术(七)虚拟机配置文件
    查询快递单号-京东快递接口
    快递单号查询快递鸟API接口-优速快递
    查询快递单号-德邦快递
    快递单号查询快递鸟API接口-EMS
    快递单号查询快递鸟API接口--安能快递
  • 原文地址:https://www.cnblogs.com/baixinL/p/14355953.html
Copyright © 2011-2022 走看看