echats动态数据

子组件

<template>
    <div :id="id" style="width:520px; height: 300px"></div>
</template>
<script>
  import * as echarts from "echarts";
  export default {
    props:{ //从别的页面传过来的值在这定义类型，和默认值
      id:{
        type:String,
        default:"echart"
      },
      title:{
        type:String,
        default:''
      },
      data:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    data() {
      return {};
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        var vm=this;
        console.log(vm);
        var myChart = echarts.init(document.getElementById(this.id)); //获取dom
        myChart.setOption({
          color: ["#3bbaff"],
          title: [{
              text: vm.title,
              textStyle: {
                //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: "Arial, Verdana, sans...",
                fontSize: 16,
                fontStyle: "normal",
                fontWeight: "normal",
              },
            },
          ],
          xAxis: {
            type: "category",
            data: vm.data.title,
            // 刻度线隐藏
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: true
            }
          },
          series: [{
            data: vm.data.value,
            type: "bar",
            barWidth: 20,
          }, ],
        });
      },
    },
  };
</script>

父组件定义数据

<template>
  <div class="about">
    <echarts title="偏差率%" :data="res" id="one"></echarts>
  </div>
</template>
<script>
import echarts from '@/components/echart.vue'
export default {
  props:["id","title"], //记得prop传过来
    components:{
    echarts
  },
  data(){
    return {
      res:{
        title: ["气井1", "气井2", "气井3"],
        value: [455, 247, 246]
      }
    }
  }
}
</script>