ECharts可视化图表库在前端领域的使用

一、在线官网库：Apache ECharts

国内镜像地址 ：①https://www.isqqw.com/echarts-doc/zh/option.html#title

二、使用方法

①先在项目安装echarts包

②在项目里引用：

1.导入echarts包

import * as echarts from 'echarts';

2.获取DOM节点进行渲染图表

3. 页面一挂载在DOM元素渲染图表（基础结构基本一样，type选择相应类型的图表，类型下面填写相应属性，可以看官网文档来）

onMounted(() => {
    //获取echarts类的实例
    let mycharts = echarts.init(charts.value);
    //设置实例的配置项
    mycharts.setOption({
        //标题组件
        title: {
            text: '水球图'
        },
        //x|y轴组件
        xAxis: {},
        yAxis: {},
        //系列:决定你展示什么样的图形图标
        series: {
            type: 'liquidFill',//系列、图表类型（有些图表在Apache ECharts没有，得单独安装相应的包）
            data: [0.6, 0.4, 0.2],//展示的数据
            waveAnimation: true,//动画
            animationDuration: 3,
            animationDurationUpdate: 0,
            radius: '100%',//半径
            outline: {//外层边框颜色设置
                show: true,
                borderDistance: 8,
                itemStyle: {
                    color: 'skyblue',
                    borderColor: '#294D99',
                    borderWidth: 8,
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.25)'
                }
            },
        },
        //布局组件
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
        }

    })
})

*有些图表在Apache ECharts库里没有，我们可以在npm里搜素查找echarts,选择相应图表，根据提示在项目安装相应图表的包并导入使用，这样就可以在上面type使用单独的图表了）

三、地图使用 

一、先去阿里云中国地图：http://datav.aliyun.com/portal/school/atlas/area_selector

把中国地图的精度和纬度JSON格式复制下来

二、 在Echats库里（国内镜像：https://www.isqqw.com/echarts- doc/zh/option.html#title）

搜素geo =>里面有map地图方法，根据提示创建地图

①项目新建一个JSON文件，把中国地图的经纬度粘贴进去

②在vue项目里，先获取展示地图的DOM，引入echarts等相关组件 ，用于创建地图

  <div class="box4" ref="map">
        我是地图组件
    </div>

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
//引入中国地图的JSON数据
import chinaJSON from './china.json'
//获取DOM元素
let map = ref();

③注册地图组件(registerMap方法，看echarts文档)

//注册中国地图
echarts.registerMap('china', chinaJSON as any)

④编写地图组件（看echarts库里的geo ->map方法）

//一面一挂载就显示图表
onMounted(() => {
    let mychart = echarts.init(map.value);
    //设置配置项
    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: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                opacity: .8
            },
            //地图高亮的效果
            emphasis: {
                itemStyle: {
                    color: 'red'
                },
                label: {
                    fontSize: 40
                }
            }
        },
        //布局位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        series: [
            {
                type: 'lines',//航线的系列
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989],  // 起点
                            [119.306239, 26.075302]   // 终点

                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'orange',
                            width: 5
                        }
                    },
                    {
                        coords: [
                            [116.405285, 39.904989],  // 起点
                            [114.298572,30.584355]   // 终点

                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'yellow',
                            width: 5
                        }
                    }
                ],
                //开启动画特效
                effect: {
                    show: true,
                    symbol: 'arrow',
                    color: 'black',
                    symbolSize: 10
                }
            }
        ]
    })

});

这样就得到了一个中国地图