vue界面背景

<template>
  <div style="height: 370px;width:790px">
    <simple-chart :option="chart.option"/>
  </div>
</template>

<script>
import 'echarts/map/js/world';
import 'echarts/map/json/world.json';
import mapBackgroundImg from '@/assets/mapBackground.png';
import SimpleChart from '../../components/SimpleChart.vue';

const image = new Image();
image.src = mapBackgroundImg;
export default {
  name: 'Index',
  components: { SimpleChart },
  data() {
    return {
      chart: {
        option: {
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize(val) {
                return val[2] * 5;
              },
              data: [
                { value: [125.03, 46.58, 1] },
                {
                  value: [114.31, 30.52, 2],
                },
                { value: [117.27, 31.86, 3] },
                {
                  value: [115.480656, 35.23375, 1],
                },
                { value: [116.7, 39.53, 2] },
                { value: [110.78, 32.65, 2] },
                { value: [120.15, 32.08, 2] },
                { value: [115.47, 38.87, 2] },
                { value: [112.20, 32.08, 4] },
                { value: [106.55, 29.57, 2] },
                { value: [121.75, 30.22, 2] },
                { value: [121.62, 38.92, 1] },
                { value: [115.50, 28.28, 1] },
                {
                  value: [118.88, 28.97, 2],
                },
                {
                  value: [125.33203, 43.834525999999997, 4],
                },
                {
                  value: [115.4586524667, 38.873010118000003, 1],
                },
                {
                  value: [24.345703, -4.915833, 4],
                },
                {
                  value: [119.4029604688, 32.395377396299999, 1],
                },
                {
                  value: [89.517194, 42.913632, 2],
                }, {
                  value: [102.422898, 26.660093, 1],
                }, {
                  value: [102.422898, 40.234052, 2],
                },
                {
                  value: [104.189039, 40.739751, 4],
                }, {
                  value: [107.500552, 35.812094, 1],
                }, {
                  value: [102.643666, 29.980642, 1],
                },
              ],
              itemStyle: {
                normal: {
                  color: '#abd3f8',
                  borderColor: '#57adfb',

                },
              },
            },
          ],
          geo: {
            map: 'world',
            silent: true,
            label: {
              emphasis: {
                show: false,
                areaColor: '#eee',
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 'none',
                backgroundColor: 'none',
                borderColor: 'none',
                color: {
                  image, // 支持爲 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
                  repeat: 'repeat', // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                },
              },
            },
            left: '0%',
            top: 0,
            bottom: '0%',
            right: '0%',
            roam: false,
          },
        },
      },
    };
  },
};
</script>

<style scoped>

</style>

效果圖