vue 组件 echarts跳转总结

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')
  },