快速上手echarts，一分钟生成你的图表，在Vue中使用echarts地图等常用类型，

一、安装echarts插件

在终端使用 npm 或者 yarn 等下载 echarts组件库；

npm install echarts || yarn add echarts

 二、在项目中引入Echarts

         以Vue2为例，下载完成后在main.js文件中引入我们的echarts库，由于Vue2的特性所致，我们可以获取到Vue全局对象，所以我们直接在Vue的prototype上挂载，这样我们就可以在任意组件中通过this来直接使用。

import * as echarts from 'echarts'  // 引入

Vue.prototype.$echarts = echarts // 挂载

三、使用Echarts 

        使用Echarts步骤就只有三个，大家只需要记住这三个步骤就好；

1.准备好一个dom元素，作为echarts的容器；

           绑定ref，在下面我们需要获取到它，或者使用原生js的dom选择器获取，效果都一样。

<template>
    <div class="echarts" ref="box" style="width:452px; height:250px"></div>
</template>

  2.基于准备好的dom，初始化echarts实例

var myChart = this.$echarts.init(this.$refs.box);

3.调用echarts配置函数

        调用setOption( { } ),参数为一个配置对象，如下图配置一个简单的柱状图

 myChart.setOption({
                backgroundColor: 'pink',
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }
                ]
            });

可以看到一个图表就生成了，具体的数据大家可以参考官网提供的示例，里面包含了大部分的图表配置，也可以查看配置手册定制自己的图表，https://echarts.apache.org/zh/option.html#title

   当我们把series中对象的type类型修改为折线图时，图表就变为了折线图

        

myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'line' // 折线图
                    }
                ],
                backgroundColor: 'pink',
              
            });

 

以上就是一些基本图表的配置比较简单，接下来我们看看另一种比较常用但少许复杂的地图图表 

三、配置一个地图图表

想要实现一个echarts地图组件首先需要准备一份地图数据(JSON)，可以直接在网上找一份，如下：

 有了数据以后，需要我们在组件中引入该数据，并通过echarts实例方法registerMap进行注册地图，方法接收两个参数，参数一为国别，参数二为该国地理JSON数据

import chinaJSON from './china.json' // 引入

this.$echarts.registerMap('china', chinaJSON) // 注册

做完这些，后面配置就一样了，唯一变化是在setOption参数对象中多了一个地图的配置对象geo：

 myChart.setOption({
                //地图组件
                geo: {
                    map: 'china',//中国地图
                    roam: true,//鼠标缩放的效果
                    //地图的位置调试
                    left: 150,
                    top: 150,
                    right: 150,
                    zoom: 1.2,
                    bottom: 0,
                    //地图上的文字的设置
                    label: {
                        show: true,//文字显示出来
                        color: 'white',
                        fontSize: 14
                    },

                    itemStyle: {
                        //每一个多边形的样式
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'blue' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'green' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        opacity: .8
                    },
                    //地图高亮的效果
                    emphasis: {
                        itemStyle: {
                            color: 'red'
                        },
                        label: {
                            fontSize: 40
                        }
                    }
                },
                //布局位置
                grid: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
                },

            });

以上就实现了一个地图组件了，echarts作为非常热门的可视化库，在前端开发中常常会有它的身影，所以你学会了吗~~

友情提示：

1、图表不显示请查看是否获取到dom，是否设置了宽高。

2、上述逻辑通常在mounted生命周期中执行，也可以根据自己的需求在合适的阶段执行。