vue+echats+svg展示园区平面图的实例

以下是一个使用Vue和Echarts SVG展示园区平面图的简单实例：

template:

<template>
  <div>
    <div ref="chart"></div>
  </div>
</template>

script:

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [
        { name: 'A区', value: 100 },
        { name: 'B区', value: 80 },
        { name: 'C区', value: 60 },
        { name: 'D区', value: 40 },
        { name: 'E区', value: 20 },
      ],
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart);

      // 自定义图标路径，注意这里是相对路径
      echarts.registerMap('demo', {
        svg: '/map.svg',
      });

      chart.setOption({
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'map',
            map: 'demo',
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 1,
                label: {
                  show: true,
                  position: 'inside',
                  color: '#fff',
                },
              },
              emphasis: {
                areaColor: '#2a333d',
                label: {
                  show: true,
                  color: '#fff',
                },
              },
            },
            data: this.chartData,
          },
        ],
      });
    },
  },
};
</script>

以上代码使用了echarts，首先需要安装echarts：

npm install echarts --save

然后在mounted方法中初始化echarts实例，使用registerMap方法加载svg地图，最后使用setOption方法设置图表数据和样式。其中，map属性的值为注册的地图名称，itemStyle中normal表示正常状态下的样式，emphasis表示高亮状态下的样式，data表示需要展示的数据。