vue 组件 echarts跳转总结

Xiner_queen

已于 2023-02-10 15:49:15 修改

阅读量2.4k

点赞数 1

分类专栏： Echarts 文章标签： react.js vue.js javascript

于 2021-08-25 16:48:01 首次发布

本文链接：https://blog.csdn.net/Nick_wing/article/details/119914579

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue组件间参数传递的方法，包括父组件向子组件传递参数及子组件向父组件发送事件。同时，讲解了Echarts图表的点击事件处理，包括如何根据点击位置跳转至百度搜索，并区分不同类型的图表元素。最后，提到了Vue在Django后端的跨域解决方案，通过vue.config.js设置代理来解决。

摘要由CSDN通过智能技术生成

1.组件传参：

（1）父组件P 向子组件 C传参，父组件将要传递的参数放在属性中，子组件用props接收，总体包括三步

P 中引用 C

P 中注册 C

P 将要传递的参数放在属性中，C使用props接收

（2）子组件向父组件传参，用到了$emit

具体链接：

Vue组件之间如何传参 - 小菜鸟TY - 博客园

echarts组件参数：横纵坐标数据

video组件：视频url或者url列表时间跳转

2.Echarts 点击跳转

// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

//区分鼠标点击到了哪里
myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'line') { //折线图
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。

            }
        }
    }
});

3. vue Django 跨域问题

vue前端设置代理在前端项目vue.config.js添加代理

使用request 请求

devServer: {
    //添加跨域
    proxy: {
      "/api":{
      target: '',//请求目标地址
        changeOrigin:true,
          pathRewrite: {
              ['^/api']: ''
          }
      }
  },
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js')
  },