echart学习之(一)熟悉坐标,网格

作者: 文子轩 | 来源:发表于2018-06-28 23:52 被阅读76次

echart学习之(一)熟悉坐标,网格
Echart - grid网格
echart横坐标文字过长
地图定位线点实现思路<无代码>
echart 学习记录
从Atlas定义器件结构
echart3D地球上贴2D组件
echart Y轴坐标不为小数
meshgrid
[补充]向量空间

一.学习echarts前面的准备

echarts2的官网 http://echarts.baidu.com/echarts2
echarts2 的文档学习教程 http://echarts.baidu.com/echarts2/doc/doc.html#Xaxis
echarts的实例demo展示 http://echarts.baidu.com/echarts2/doc/example.html
echarts的图表的主要类型:echart包括折线图(表示趋势等关系),扇形图(表示比例等),柱状图(数量维度等),k线图(股表多维度的信息),拓扑关系(表示对象之间的相互关系),混搭(比如折线图和柱状图混搭等)

二. 一个简单的echart两种引入方式

单文件引入echarts-all.js

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</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>

新建option,形成柱状图

!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</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:['销量']
            },
            x轴的定义
            xAxis : [   
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            y轴的定义
            yAxis : [
                {
                    type : 'value'
                }
            ],
            bar表示柱状图,name是legend的索引,date是x轴定义的数据
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

模块化引入

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 --> 模块化引入,加载所需要的js库
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
    </script>
</body>

模块化引入demo

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
             paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.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>