有时候绘制一些图形,上网找的例子给的都好复杂,所以我在下面就弄了一些简单的例子,会给出最基本的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 } ] };