vue父组件调用子组件

父组件

<template>
  <div style="height: 100%;">
    <singleChart id="myChart2" :yData="lineYData" :xData="lineXData" :seriesData="lineSeriesData" ></singleChart>
    </div>
</template>
<script>
import '../../../static/plugins/echarts3/js/sichuan.js'
import sichuanMap from '../../components/sichuanMap'
import singleChart from '../../components/singleChart'

let lineitemStyleColor = {
  // 通常情况下：
  normal: {
    // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
    color: function (params) {
      // console.log('data', this.props.dataArr)
      let index = params.value
      let val = 99
      // 判断数据是否大于1
      if (index > 50 && index >= val) {
        return '#00b050'
      } else if (index <= 50) {
        return 'red'
      } else {
        return '#ff7f50'
      }
    }
  }
}
export default {
  name: 'index',
  components: {
    sichuanMap,
    singleChart
  },
  data () {
    return {
      activeName: 'first',
      lineXData: ['阿坝', '巴中', '成都', '达州', '德阳', '甘孜', '广安', '广元', '乐山', '凉山', '泸州', '眉山', '绵阳', '南充', '内江', '攀枝花', '遂宁', '天府', '雅安', '宜宾', '资阳', '自贡'],
      lineYData: [],
      lineData: [ 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 98, 96, 94, 30 ],
      lineSeriesData: [
        {
          name: '',
          type: 'bar',
          barWidth: '60%',
          itemStyle: lineitemStyleColor,
          data: [ 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 98, 96, 94, 30 ]
        }
      ],
      mapData: [
        {name: '成都', value: parseInt(Math.random() * 100) + 50},
        {name: '阿坝', value: parseInt(Math.random() * 100) + 10},
        {name: '甘孜', value: parseInt(Math.random() * 100) + 40},
        {name: '凉山', value: parseInt(Math.random() * 100) + 60},
        {name: '攀枝花', value: parseInt(Math.random() * 100) + 1},
        {name: '雅安', value: parseInt(Math.random() * 100) + 50},
        {name: '乐山', value: parseInt(Math.random() * 100) + 1},
        {name: '广元', value: parseInt(Math.random() * 100) + 1},
        {name: '巴中', value: parseInt(Math.random() * 100) + 50},
        {name: '达州', value: parseInt(Math.random() * 100) + 1},
        {name: '绵阳', value: parseInt(Math.random() * 100) + 40},
        {name: '南充', value: parseInt(Math.random() * 100) + 40},
        {name: '德阳', value: parseInt(Math.random() * 100) + 1},
        {name: '广安', value: parseInt(Math.random() * 100) + 20},
        {name: '遂宁', value: parseInt(Math.random() * 100) + 50},
        {name: '滋养', value: parseInt(Math.random() * 100) + 50},
        {name: '自贡', value: parseInt(Math.random() * 100) + 1},
        {name: '宜宾', value: parseInt(Math.random() * 100) + 60},
        {name: '泸州', value: parseInt(Math.random() * 100) + 50},
        {name: '内江', value: parseInt(Math.random() * 100) + 1},
        {name: '眉山', value: parseInt(Math.random() * 100) + 40},
        {name: '资阳', value: parseInt(Math.random() * 100) + 1}
      ]
    }
  },
  mounted () {

  },
  methods: {
    tabsClick (tab, event) {
      let index = tab._data.index
      document.getElementById('jumpPage' + index).scrollIntoView(true)
    }
  }
}
</script>

子组件

<template>
  <div>
    <div>
      <div style="width: 100%;height: 350px;" :id=id></div>
    </div>
  </div>
</template>

<script>
import '../../static/plugins/echarts3/js/sichuan.js'
export default {
  name: 'singleChart',
  props: {
    id: { type: String },
    dataArr: { type: Array }
  },
  mounted () {
    this.mapChart()
  },
  methods: {
    mapChart () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        title: {
          show: false,
          text: ''
        },
        backgroundColor: 'transparent',
        tooltip: {},
        visualMap: {
          show: true,
          x: 'left',
          y: 'bottom',
          splitList: [
            {start: 90},
            {start: 80, end: 90},
            {start: 70, end: 80},
            {end: 70}
            // {start: 200, end: 300},
            // {start: 100, end: 200},
          ],
          textStyle: {
            color: '#fff'
          },
          color: [
            // '#5475f5',
            '#47c47d',
            '#f1da66',
            '#ebad8e',
            '#da432a'
            // '#9fb5ea'
          ]
        },
        geo: { // 这个是重点配置区
          map: '四川', // 表示中国地图
          name: '四川',
          roam: false,
          zoom: 1.2,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: '#000'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            name: '启动次数', // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: this.dataArr// 这里就是数据，即数组可以单独放在外面也可以直接写
          }
        ]
      })
      myChart.resize()
    }
  }
}
</script>

<style scoped>

</style>