一些echarts绘图的简单例子

  有时候绘制一些图形，上网找的例子给的都好复杂，所以我在下面就弄了一些简单的例子，会给出最基本的option构造。绘制出来的图形颜色我特意设置了一些不大好看的颜色，这样毕竟好区分嘛。
毕竟，只要知道了最基本的option构造，代码写起来都不是问题哈。
  我在未来有可能会陆陆续续进行补充。

  可以打开这个echarts的官网链接：http://gallery.echartsjs.com/editor.html?c=xr1vmCGDBz，把下面对应例子中的代码替换掉原来的代码，刷新就可以看到结果

 绘制地图前不要忘了引入echarts里的相关的地图文件，例如中国就引入： import 'echarts/map/js/china';

1、在地图上绘制流向图

先上效果图：

 

option = {
    geo: {
        map: 'china',
        // 地区块儿颜色
                itemStyle: {
                    // 正常情况
                    normal: {
                        // 区域颜色
                        areaColor: '#abcdef',
                        // 边界线颜色
                        borderColor: '#fff'
                    },
                    // 鼠标悬停情况
                    emphasis: {
                        areaColor: '#21AEF8'
                    }
                }
    },
    series: [
        {
            type: 'lines',
            coordinateSystem: 'geo',
            lineStyle: {
                normal: {
                    // 线条颜色
                    color: 'green',
                    // 线条曲线弧度
                    curveness: 0.2,
                    // 线条宽度
                    width: 4
                }
            },
            data: [{coords: [[116.384722, 39.977552], [87.500966,  43.983832]]}],
            symbol: ['none', 'arrow'],
            symbolSize: 20  // 箭头大小
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [{ name: '北京', value: [116.384722, 39.977552]}, {name: '新疆', value: [87.500966,  43.983832]}],
            itemStyle: {
                    normal: {
                        color: 'red' // 点的颜色
                    }
                },
                label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}',
                            color: 'orange', // 字体的颜色
                            fontSize: 16 // 字体大小
                        }
                    }
        }     
   ]
};

 

 

 

2、在地图上绘制柱状图

 

 

option = {
    geo: {
        map: 'china',
        // 地区块儿颜色
                itemStyle: {
                    // 正常情况
                    normal: {
                        // 区域颜色
                        areaColor: '#abcdef',
                        // 边界线颜色
                        borderColor: '#fff'
                    },
                    // 鼠标悬停情况
                    emphasis: {
                        areaColor: '#21AEF8'
                    }
                }
    },
    grid: [  // 柱状体的位置与grid有关
        {
            id: 'grid1', 
            width: 10,  // 柱状体宽度
            height: 60,  // 柱状体总高度
            left: 203.984944,
            top: 300
        },
        {
            id: 'grid2', 
            width: 10,  // 柱状体宽度
            height: 60,  // 柱状体总高度
            left: 303.984944,
            top: 250
        }
    ],
    series: [
        {
            xAxisId: 'xAxis1',
            yAxisId: 'yAxis1',
            type: 'bar',
            data: [230],
            itemStyle: {
                normal: {
                    color: 'purple', // 柱状体颜色
                    label: {
                        show: true,
                        position: 'top' // 显示该柱状体的值
                    }
                }
            }
        },
        {
            xAxisId: 'xAxis2',
            yAxisId: 'yAxis2',
            type: 'bar',
            data: [440],
            itemStyle: {
                normal: {
                    color: 'purple', // 柱状体颜色
                    label: {
                        show: true,
                        position: 'top' // 显示该柱状体的值
                    }
                }
            }
        }
    ],
    xAxis: [
        {
            id: 'xAxis1',
            gridId: 'grid1',
            type: 'category',
            data: ['2015'],
            axisLine: {show: false},
            axisTick: {show: false},
            show: true,
            axisLabel: {
                color: 'blue'  // x轴刻度标签颜色
            }
        },
        {
            id: 'xAxis2',
            gridId: 'grid2',
            type: 'category',
            data: ['2018'],
            axisLine: {show: false},
            axisTick: {show: false},
            show: true,
            axisLabel: {
                color: 'blue'  // x轴刻度标签颜色
            }
        }
    ],
    yAxis: [
        {
            id: 'yAxis1',
            gridId: 'grid1',
            min: 0,
            max: 500,
            show: false
        },
        {
            id: 'yAxis2',
            gridId: 'grid2',
            min: 0,
            max: 500,
            show: false
        }
    ]
};