echarts+百度地图绘制散点图 上

我是用原生echarts绘制的散点图

1、先设置数据
数据格式必须为

//[{name:"城市名/地点名",value:[经度，维度,数据源]}]
var testPoint = [{
 name: '海门',
 value: [121.15, 31.89, 80]
}, {
 name: '南京',
 value: [118.78, 32.04, 100]
}]

2、绘制图形 必须设置 coordinateSystem: "bmap" 其他的都是和原来一样

//百度地图的echarts依赖api
import "echarts/extension/bmap/bmap";
import style from "@/utils/json.js";
//[{name:"城市名/地点名",value:[经度，维度,数据源]}]
var testPoint = [
  {
    name: "海门",
    value: [121.15, 31.89, 200]
  },
  {
    name: "南京",
    value: [118.78, 32.04, 100]
  },
  {
    name: "北京",
    value: [116.40, 39.91, 300]
  }
];
export default {
  data() {
    return {
      options: {}
    };
  },
  mounted() {
    this.setOptions();
  },
  methods: {
    setOptions() {
      var myChart = this.$echarts.init(document.getElementById("user"));
      this.options = {
        bmap: {
          key: "DBIg6Pbdp3uLG5w3PwRYb91ywOW3LABP",
          //绘制的中心点
          center: [104.114129, 37.550339],
          //缩放比例  在 3到19之间 现在是图例的正中央
          zoom: 5,
          //是否缩放
          roam: true,
          //样式文件
          mapStyle: {
            styleJson: style.styleJson
          }
        },
        series: [
          {
            name:"销售额",
            type: "scatter",//散点图
            coordinateSystem: "bmap",//坐标系必须为bmap
            data: testPoint, //测试的城市数据
            tooltip: {//鼠标移上去的提示
              formatter: function(params, ticket, callback) {
                
              }
            },
            //定制点的大小 根据销售额的数据定制点的大小
            symbolSize: function(val) {
              //val是 value: [118.78, 32.04, 300]
              return val[2] / 10;
            },
            label: {
              formatter:(data)=>{//展示名称和销售额
                return data.name+"-"+data.data.value[2]
              },
              position: "right"
            },
            //点的颜色
            itemStyle: {
              color: "#ddb926"
            },
            //鼠标移上去显示文本
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      };
      myChart.setOption(this.options);
    }
  }
};
</script>

3效果展示

soogif.gif