自学ECharts（一）

最新推荐文章于 2024-04-21 16:36:08 发布

在北京的小蜜蜂

最新推荐文章于 2024-04-21 16:36:08 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/jonia917/article/details/41862135

版权

一、了解

想要自学Echarts了，若有不对或者不恰当的地方，欢迎指正！！！

在项目中用到了ECharts，同事之前有过一个小例子，就参考他的做，后来发现，已经不能满足需求了，而他本身也并不了解多少，便开始去官网看了一个简单的例子，一开始就找文档，结果得到的效果甚微，一些配置还是不知道怎么用，便耐心的看官网首页关于ECharts的介绍，看完还是一头雾水，偶然点开了首页上方的“特性”，才发现了更详细的介绍，让我产生了了解并且学习的兴趣，真心觉得是个不错的产品！！！特别是拖拽重计算、图例开关、炫光特效，让我觉得它很神奇，感谢它的产生，向它的开发人员致敬！！！

“实例”里有一个“入门教程”，我决定从这里开始，start！！！

二、第一次尝试

1、按照官网给出的实例进行摸索，http://echarts.baidu.com/doc/start.html，在此之前建议看一下文档http://write.blog.csdn.net/，有一个大概的了解，比如哪些参数代表什么

2、官网给出的推荐导入方式是“模块化单文件引入”，可我觉得“标签化单文件引入”更方便一些；

1）首先看一下“模块化单文件引入”，"标签化单文件引入"；

我的文件存放路径如下图

下面是设置的关键点：

下面是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="echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'echarts/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>

</pre><pre code_snippet_id="552403" snippet_file_name="blog_20141215_4_5734874" name="code" class="html"><!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts  标签化单文件引入</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="F:/study/Practice/ECharts/echarts/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></span>

3）以上两种方式得到的效果图是一样的：