zoukankan      html  css  js  c++  java
  • Echarts的用法及动态数据的加载

    打开官网--》点击下载 echarts.js

    http://www.echartsjs.com/download.html

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Echarts</title>
        </head>
    
        <body>
            <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
            <div id="main" style=" 600px;height:400px;"></div>
        </body>
        <script src="js/echarts.js"></script>
    
    </html>
    <script>
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
  • 相关阅读:
    React准备
    React组件
    从uri获取图片文件的File对象
    ES6
    Promise.all
    js的ctrl+s保存功能
    浏览器端读取和生成zip文件
    vscode配置及快捷键
    Array
    最全React技术栈技术资料汇总
  • 原文地址:https://www.cnblogs.com/fanting/p/10125860.html
Copyright © 2011-2022 走看看