VUE页面使用Apache ECharts组件交通（SVG）

最新推荐文章于 2026-01-08 20:54:44 发布

原创最新推荐文章于 2026-01-08 20:54:44 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

1.前端页面代码

一开始用的 $.get(svgContent, function (svg) {
echarts.registerMap('ksia-ext-plan-min', { svg: svg })方法一致不能正确访问到SVG的内容，在网上找了一位大神的代码，替换之后就能正确使用了。感谢那位大神！！！

<template>
  <div id="container" ref="chartContainer" style="height: 100%; width: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import svgContent from '../../../assets/ksia-ext-plan-min.svg'
import $ from 'jquery'

const chartContainer = ref(null)
const myChart = ref(null)

// 初始化图表
const initChart = async () => {
  if (!chartContainer.value) return

  myChart.value = echarts.init(chartContainer.value)

  try {
    $.get(svgContent, function (svg) {
      echarts.registerMap('ksia-ext-plan-min', { svg: svg })
      const option = {
        tooltip: {},
        geo: {
          map: 'ksia-ext-plan-min',
          roam: true,
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
        },
        series: [
          {
            name: '京A00001',
            type: 'lines',
            coordinateSystem: 'geo',
            geoIndex: 0,
            emphasis: {
              label: {
                show: false,
              },
            },
            polyline: true,
            lineStyle: {
              color: '#c46e54',
              width: 0,
            },
            effect: {
              show: true,
              period: 8,
              color: '#a10000',
              // constantSpeed: 80,
              trailLength: 0,
              symbolSize: [12, 30],
              symbol:
                'path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z',
            },
            z: 100,
            data: [
              {
                effect: {
                  color: '#a10000',
                  constantSpeed: 100,
                  delay: 0,
                },
                coords: [
                  [50.875133928571415, 242.66287667410717],
                  [62.03696428571425, 264.482421875],
                  [72.63357421874997, 273.62779017857144],
                  [92.78291852678569, 285.869140625],
                  [113.43637834821425, 287.21854073660717],
                  [141.44788783482142, 288.92947823660717],
                  [191.71686104910714, 289.5507114955357],
                  [198.3060072544643, 294.0673828125],
                  [204.99699497767858, 304.60288783482144],
                  [210.79177734375003, 316.7373046875],
                  [212.45179408482142, 329.3656529017857],
                  [210.8885267857143, 443.3925083705358],
                  [215.35936941964286, 453.00634765625],
                  [224.38761997767858, 452.15087890625],
                  [265.71490792410714, 452.20179966517856],
                  [493.3408844866072, 453.77525111607144],
                  [572.8892940848216, 448.77992466517856],
                  [608.9513755580358, 448.43366350446433],
                  [619.99099609375, 450.8778599330358],
                  [624.2479715401787, 456.2194475446429],
                  [628.1434095982145, 463.9899553571429],
                  [629.8492550223216, 476.0276227678571],
                  [631.2750362723216, 535.7322126116071],
                  [624.6757059151787, 546.6496233258929],
                  [617.1801702008929, 552.6480887276786],
                  [603.7269056919645, 554.5066964285714],
                  [588.0178515625, 557.5517578125],
                  [529.4386104910716, 556.2991071428571],
                  [422.1994921875001, 551.38525390625],
                  [291.66921875, 552.5767996651786],
                  [219.4279380580357, 547.4949079241071],
                  [209.53912667410714, 541.5931919642858],
                  [206.70793247767858, 526.1947544642858],
                  [206.70793247767858, 507.4049944196429],
                  [206.12234375000003, 468.7663225446429],
                  [204.48778738839286, 459.44782366071433],
                  [197.56256417410714, 452.8943219866071],
                  [170.31995814732142, 456.27546037946433],
                  [1.8078906249999704, 460.5935407366071],
                ],
              },
            ],
          },
        ],
      }
      myChart.value.setOption(option)
    }).fail(function (jqXHR, textStatus, errorThrown) {
      console.error('加载SVG失败:', textStatus, errorThrown)
    })

    window.addEventListener('resize', handleResize)
  } catch (error) {
    console.error('图表初始化失败:', error)
  }
}

const handleResize = () => {
  myChart.value?.resize()
}

// 监听时间参数变化

onMounted(() => {
  initChart()
})
</script>

<style scoped>
#container {
  height: 100%;
  min-height: 800px;
}
</style>

2.在其他页面引入

<template>
  <div class="chart-selector-container">
    <div class="chart-selector">
      <div class="input-button-group">
        <el-input v-model="input1" placeholder="请输入托盘号" class="input-item"></el-input>
        <el-input v-model="input2" placeholder="请输入物料号" class="input-item"></el-input>
        <div class="button-group">
          <el-button type="success" @click="handleQuery">查询</el-button>
        </div>
      </div>
    </div>

    <div class="chart-wrapper">
      <Index2 />
      <!-- <Index2 :timeParam="queryTime" /> -->
    </div>
  </div>
</template>

<script>
import { mixins } from 'dyend-ui'
import page from './page'
import Index2 from './car.vue' // 导入子页面组件
// import Index2 from './mapLine.vue' // 导入子页面组件

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { Index2 },
  data() {
    return {
      input1: '',
      input2: '',
      queryTime: '', // 存储查询时间参数
      list: {
        model: {
          goodsNumber: '',
          name: '',
          model: '',
          specification: '',
          productionDate: '',
          supplier: '',
          storageCondition: '',
          expiryDays: '',
        },
      },
      buttons: page.buttons,
    }
  },
  methods: {
    handleQuery() {
      // 生成时间参数（例如当前时间）
      this.queryTime = new Date().toISOString() // 或其他格式
      // 如果需要其他参数，可以一并传递：
      // this.queryParams = { time: new Date(), pallet: this.input1, material: this.input2 };
    },
    add() {
      // 如果需要处理“添加”按钮逻辑
      console.log('Add button clicked')
    },
  },
}
</script>

<style scoped>
.embedded-page-container {
  margin-top: 20px;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chart-wrapper {
  flex: 1;
  display: flex; /* 关键：使子组件可以继承高度 */
  /*padding: 10px;*/
  overflow: hidden; /*防止滚动条挤压内容*/
  height: 100%; /* 关键：配合 flex 布局 */
}
.input-button-group {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 输入框和按钮之间的间距 */
  flex-wrap: wrap; /* 如果空间不足，自动换行 */
}

.input-item {
  width: 200px; /* 固定输入框宽度（可选） */
  flex-shrink: 0; /* 防止输入框被压缩 */
}

.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}
</style>