博学谷it学习技术支持

ECharts介绍及使用方法

Echarts其实就是一个JavaScript的图标库，我们在做项目时用到一些相关的图表，我们都可以直接从Echarts里面去找相类似的模板，然后再去修改引入，就像我们平时做ppt一样，先去网上找相关模板，看好模板把自己的内容镶嵌进去，然后生成新的ppt那就是你的了，哈哈哈

ECharts是一个纯JavaScript图表库，底层依赖于轻量级的[Canvas])类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。（官方解释）

官网地址：[echarts.apache.org//]

第一步，先在官网上选择合适的版本进行下载

就是去挑选自己喜欢的或者说合适项目的模板，就点上面的官网地址进去，里面有一个示例选项，在这个里面选择合适的模板。

第二步，引入Echarts.js文件

这个文件还是先要去官网上下载，www.jsdelivr.com/package/npm…选择 dist/echarts.js，点击并保存为 echarts.js 文件。

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

注意把地址写对哦，要不引入不生效

第三步，绘制一个简单的图表

就是先准备一个DOM容器好把我们的图表展示出来，这个容器大小，边框等等属性，根据项目需求来完成就可

<div style="border:2px solid #666;width:49%;height:450px;float:left" class="box"></div>

第四步，初始化echarts实例对象

var myChart = echarts.init(document.querySelector(".box"));

就是把上面写好的DOM容器获取过来，然后注意的是前面的echarts.init这个是必不可少的

第五步，指定配置项和数据

这一步就是把原来模板里的内容进行修改，然后复制粘贴过来到我们新写的js中去

var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

这里面一定不要忘了前面的var，后面的option的这些内容都是从官网的示例中复制粘贴来的，你可以进行修改，但是一定是你搞清楚每一个代表的意义和修改后产生的效果，别乱改。

具体怎么改，可以参照官网中文档中有个配置项手册，在里面去查询，当然里面有所有的配置项怎么修改的详细介绍，你可能查起来费劲，那最简单的方法还是问度娘，自己去搜一下，一清二楚。这里就不再赘述了，要是把里面的配置项展开讲，三天三夜都不一定能讲完，讲完也不一定能记住。

还有最后一步，将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表

这一步就是把我们之前初始化的实例对象和我们修改后的配置相结合，让他生效

myChart.setOption(option);

注意这里的myChart就是你上面给起的名字，别写错大小写。setOption这个改不了，是要求，小括号里写的就是我们前面配置项var后面跟的那个Option

前端学习