vue使用echarts出现跨域

在 Vue 中使用 ECharts 时，如果数据源和 ECharts 所在的域名不同，则会出现跨域问题，需要进行跨域处理。

解决方法：

1. 在服务端设置响应头Access-Control-Allow-Origin，允许指定的域名跨域访问。

2. 使用 vue-cli 的 proxyTable 配置代理，将请求转发到后台服务器上，由后台服务器进行跨域处理。

3. 在 ECharts 的配置项中设置 dataURL，将数据请求发送到后台服务器，由后台服务器进行跨域处理。

示例代码：

// 1. 在服务端设置响应头
// 在后台服务器中添加以下代码：
// 设置允许指定的域名跨域访问
header("Access-Control-Allow-Origin: http://localhost:8080");

// 2. 使用 vue-cli 的 proxyTable 配置代理
// 在 vue.config.js 文件中添加以下代码：
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

// 3. 在 ECharts 的配置项中设置 dataURL
// 在 Vue 组件中添加以下代码：
<template>
  <div id="chart"></div>
</template>

<script>
  export default {
    data () {
      return {
        chartData: []
      }
    },
    mounted () {
      this.getChartData()
    },
    methods: {
      getChartData () {
        this.$http.get('/api/chart').then(res => {
          this.chartData = res.data
          this.drawChart()
        })
      },
      drawChart () {
        const option = {
          title: {
            text: 'ECharts 数据统计'
          },
          xAxis: {
            type: 'category',
            data: this.chartData.map(item => item.name)
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.chartData.map(item => item.value),
            type: 'bar'
          }]
        }
        this.$echarts.init(document.getElementById('chart')).setOption(option)
      }
    }
  }
</script>

上述示例代码中，第一种和第二种方法都需要后台服务器的支持，在后台服务器中设置响应头或配置代理；第三种方法则是将数据请求发送到后台服务器进行跨域处理，需要在 Vue 组件中使用 $http 发送请求。