• echarts入门


    转载:http://www.cnblogs.com/LonelyShadow/p/4175071.html

    1. 新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts - 孤影Blog</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:400px"></div>
    </body>
    
    新建一个echarts.html文件。为ECharts准备一个具备大小(宽高)的Dom

    2. 新建<script>标签引入echart-all.js。

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts - 孤影'Blog</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    </body>
    
    引入echarts-all.js

    3. 新建<script>,使用全局变量echarts初始化图表并驱动图表的生成。

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts - 孤影'Blog</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:400px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts图表
            var myChart = echarts.init(document.getElementById('main')); 
            
            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data:['销量']
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"销量",
                        "type":"bar",
                        "data":[5, 20, 40, 10, 10, 20]
                    }
                ]
            };
    
            // 为echarts对象加载数据 
            myChart.setOption(option); 
        </script>
    </body>
    
    使用全局变量echarts初始化图表并驱动图表的生成
  • 相关阅读:
    小批量随机梯度下降
    查询文档
    自动求梯度
    数据操作
    Hadoop 入门
    Matplotlib 二维图像绘制方法
    Pandas 数据处理基础
    NumPy 数值计算基础课程
    关于 Shell 脚本
    语法分析
  • 原文地址:https://www.cnblogs.com/dengyg200891/p/6860689.html
Copyright © 2020-2023  润新知