echart2使用入门

最新推荐文章于 2022-08-22 19:07:21 发布

青草肥羊

最新推荐文章于 2022-08-22 19:07:21 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：知识积累文章标签： echarts

本文链接：https://blog.youkuaiyun.com/gFlyYoung/article/details/72510829

知识积累专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用echarts2创建具有地图标线和时间轴地图扩展的数据交互图表。首先，下载并引入echarts2的build文件夹，然后定义div并初始化图表。通过设置xaxis和yaxis的data属性来动态加载数据。虽然echarts2的地图扩展图表的底图制作复杂，但整体使用体验良好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用的echarts做图表，使用起来感觉比较方便，官方的文档也很详细。
我使用的是echarts2，因为项目中需要一张效果好一些的数据交互的图表，我觉得以下两张图表可以满足我的需求：
地图标线
 搭配时间轴地图扩展
感觉效果不错。

话不多说，开始吧。

首先，要下载echarts2使用所需要的模块包
echarts2
下载解压后如下：
echarts2解压文件夹
其实这么多文件和文件夹大部分都是例子和文档，你真正需要的只是build文件夹。

使用的时候，首先需要引入文件

 <script src="build/dist/echarts.js"></script>

这个文件相当一个总的入口，模块化加载的方法都基于该文件。

接下来定义一个div（节点），用于初始化图表

<div id="main" style="height:400px;"></div>

至少要定义一个高度，不然显示不出来

然后初始化图表

 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); 
            }
        );