vue3中的使用
绘制一个散点图
<template> // 默认宽高是100%， 所以要将父元素设置宽高，才会显示散点。 <vue-echarts :option="option"></vue-echarts> </template> <script> import { ref } from 'vue' import 'echarts/extension/bmap/bmap' const data = [ { name: '海门', value: 9 }, { name: '鄂尔多斯', value: 12 }, { name: '招远', value: 12 }, { name: '舟山', value: 12 }, { name: '齐齐哈尔', value: 14 }, { name: '盐城', value: 15 }, { name: '赤峰', value: 16 }, { name: '青岛', value: 18 }, { name: '乳山', value: 18 }, { name: '金昌', value: 19 }, { name: '泉州', value: 21 }, { name: '莱西', value: 21 }, { name: '日照', value: 21 }, { name: '胶南', value: 22 }, { name: '南通', value: 23 }, { name: '拉萨', value: 24 }, { name: '云浮', value: 24 }, { name: '梅州', value: 25 }, { name: '文登', value: 25 }, { name: '上海', value: 25 }, { name: '攀枝花', value: 25 } ] const geoCoordMap = { 海门: [121.15, 31.89], 鄂尔多斯: [109.781327, 39.608266], 招远: [120.38, 37.35], 舟山: [122.207216, 29.985295], 齐齐哈尔: [123.97, 47.33], 盐城: [120.13, 33.38], 赤峰: [118.87, 42.28], 青岛: [120.33, 36.07], 乳山: [121.52, 36.89], 金昌: [102.188043, 38.520089], 泉州: [118.58, 24.93], 莱西: [120.53, 36.86], 日照: [119.46, 35.42], 胶南: [119.97, 35.88], 南通: [121.05, 32.08], 拉萨: [91.11, 29.97], 云浮: [112.02, 22.93], 梅州: [116.1, 24.55], 文登: [122.05, 37.2], 上海: [121.48, 31.22], 攀枝花: [101.718637, 26.582347] } const convertData = function (data) { const res = [] for (let i = 0; i < data.length; i++) { const geoCoord = geoCoordMap[data[i].name] if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }) } } return res } export default { name: 'HelloWorld', setup() { const option = ref({ title: { text: '散点图', }, bmap: { // 这里是百度地图申请的ak key: 'XMXwpnzh2in7SuulLeibVVOmdooOBxqj', center: [104.114129, 37.550339], zoom: 5, roam: false, mapStyle: { styleJson: [ { featureType: 'water', elementType: 'all', stylers: { color: '#d1d1d1', }, }, { featureType: 'land', elementType: 'all', stylers: { color: '#f3f3f3', }, }, { featureType: 'railway', elementType: 'all', stylers: { visibility: 'off', }, }, { featureType: 'highway', elementType: 'all', stylers: { color: '#fdfdfd', }, }, { featureType: 'highway', elementType: 'labels', stylers: { visibility: 'off', }, }, { featureType: 'arterial', elementType: 'geometry', stylers: { color: '#fefefe', }, }, { featureType: 'arterial', elementType: 'geometry.fill', stylers: { color: '#fefefe', }, }, { featureType: 'poi', elementType: 'all', stylers: { visibility: 'off', }, }, { featureType: 'green', elementType: 'all', stylers: { visibility: 'off', }, }, { featureType: 'subway', elementType: 'all', stylers: { visibility: 'off', }, }, { featureType: 'manmade', elementType: 'all', stylers: { color: '#d1d1d1', }, }, { featureType: 'local', elementType: 'all', stylers: { color: '#d1d1d1', }, }, { featureType: 'arterial', elementType: 'labels', stylers: { visibility: 'off', }, }, { featureType: 'boundary', elementType: 'all', stylers: { color: '#fefefe', }, }, { featureType: 'building', elementType: 'all', stylers: { color: '#d1d1d1', }, }, { featureType: 'label', elementType: 'labels.text.fill', stylers: { color: '#999999', }, }, ], }, }, series: [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'bmap', data: convertData(data), symbolSize: function (val) { return val[2] / 10 }, encode: { value: 2, }, label: { formatter: '{b}', position: 'right', show: false, }, itemStyle: { color: 'purple', }, emphasis: { label: { show: true, }, }, }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'bmap', data: convertData( data .sort(function (a, b) { return b.value - a.value }) .slice(0, 6) ), symbolSize: function (val) { return val[2] / 10 }, encode: { value: 2, }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', }, hoverAnimation: true, label: { formatter: '{b}', position: 'right', show: true, }, itemStyle: { color: 'purple', shadowBlur: 10, shadowColor: '#333', }, zlevel: 1, }, ], }) return { option, } }, } </script>
具体案例请看官网 echarts.apache.org/examples/zh…
还有其他案例 github.com/apache/echa…
V-charts
只能在vue2中使用，它不兼容vue3。
优点：不需要引入echarts对百度地图的扩展和百度地图的js库。
安装
npm install v-charts echarts
vue2使用百度
// main.js import VeBmap from 'v-charts/lib/bmap.common.js'; Vue.component(VeBmap.name, VeBmap);
<template> <ve-bmap :settings="chartSettings" :series="chartSeries" :tooltip="chartTooltip"> </ve-bmap> </template> <script> export default { name: 'VChartsMap', data() { this.chartSettings = { key: 'XMXwpnzh2in7SuulLeibVVOmdooOBxqj', bmap: { center: [120, 30], zoom: 14, roam: true, mapStyle: {}, }, } this.chartTooltip = { show: true } return { chartSeries: [ { type: 'scatter', coordinateSystem: 'bmap', data: [ [120, 30, 1], // 经度，维度，value，... ], }, ], } }, } </script>
具体请看中文官网 woolen.gitee.io/v-charts/#/…
