首先在vue引入下面模块
npm install echarts -S引入、
main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
话不多说直接看代码
<template>
  <div style="height: 300px ; width:300px"  id="echartsM"></div>
</template>
<script>import {getAction} from "@/api/manage"  export default {
    name: "echartsM",
    data(){return{
        option : {
          color: ['#db1818'],
          title: {
            text: '',
            left:'center'
},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
}
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
},
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
}
            }
          ],
          yAxis: [
            {
              type: 'value'
}
          ],
          series: [
            {
              type: 'bar',
              barWidth: '60%',
              data: []
            }
          ]
        }
      }
    },
    mounted() {this.echarts()
      window.addEventListener("resize",function () {
        myChartm.resize()
      })
    },
    methods:{
      echarts(){let that=this
that.myChartm=that.$echarts.init(document.getElementById("echartsM"))
        that.myChartm.setOption(that.option)
      },
    },
    created() {let that=this      let url='indexData/tra_flow/last30day_traffic_flow';
      getAction(url).then((res)=>{let echartsETCB=res.resultlet echartsMname=[]//用来存值let echartsMval=[]let echartsMDT=[]
        echartsMname.push(echartsETCB[0].kpi_name)for ( let i=0;i<echartsETCB.length;i++){  //循环遍历出后台返回的数据在分别赋值
          echartsMval.push(echartsETCB[i].kpi_val)
          echartsMDT.push(echartsETCB[i].kpi_dt)this.myChartm.setOption({
            title: {
              text: echartsMname,//可以写死 也可以用后台传回来的数据 title
              left:'center'
},
            xAxis: [
              {
                type: 'category',
                data: echartsMDT,//绑定数据
                axisTick: {
                  alignWithLabel: true
}
              }
            ],
            series: [
              {
                type: 'bar',
                barWidth: '60%',
                data:echartsMval//绑定的数据
              }
            ]
          })
        }
      })
    }
  }
</script>
<style scoped>
</style>

vue+echarts 动态获取数据，图表却没有显示出来
在父组件中调用异步接口然后将数据传递给子组件中的echarts图
子组件：

通过watch监听也拿到了数据，但是echarts图愣是没有出来。。。
解决办法：

在data中定义option,通过在初始化之前，直接改变option对应属性值
//子组件：
<div class="canvas-wrap" ref="myEchart"></div>

data(){
	return(){
		option:{
			xxxxx//内容省略。。。
		}，
		myEchart：null
	}
}
methods:{
    init(){
        this.option.series[0].data = [
            {
                value: this.content.orgCount.customerCount,
                name: '委托方'
            },
            {
                value: this.content.orgCount.kernelCount,
                name: '核心企业'
            }         
        ],
        this.myEchart = this.$echarts.init(this.$refs.myEchart);
        this.myEchart.setOption(this.option,true)
    }
},

mounted(){
    //this.$nextTick(()=>{
        //this.init()
    //})
},

watch: {//监听异步数据
      content: { // content为父组件传递过来的对象
          deep: true,
          handler: function(newval,oldval){
              this.init()
          }
      }
  }

查阅链接：https://blog.csdn.net/q1ngqingsky/article/details/113888249

首先在vue引入下面模块
npm install echarts -S引入、
main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
话不多说直接看代码
<template>
  <div style="height: 300px ; width:300px"  id="echartsM"></div>
</template>
<script>import {getAction} from "@/api/manage"  export default {
    name: "echartsM",
    data(){return{
        option : {
          color: ['#db1818'],
          title: {
            text: '',
            left:'center'
},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
}
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
},
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
}
            }
          ],
          yAxis: [
            {
              type: 'value'
}
          ],
          series: [
            {
              type: 'bar',
              barWidth: '60%',
              data: []
            }
          ]
        }
      }
    },
    mounted() {this.echarts()
      window.addEventListener("resize",function () {
        myChartm.resize()
      })
    },
    methods:{
      echarts(){let that=this
that.myChartm=that.$echarts.init(document.getElementById("echartsM"))
        that.myChartm.setOption(that.option)
      },
    },
    created() {let that=this      let url='indexData/tra_flow/last30day_traffic_flow';
      getAction(url).then((res)=>{let echartsETCB=res.resultlet echartsMname=[]//用来存值let echartsMval=[]let echartsMDT=[]
        echartsMname.push(echartsETCB[0].kpi_name)for ( let i=0;i<echartsETCB.length;i++){  //循环遍历出后台返回的数据在分别赋值
          echartsMval.push(echartsETCB[i].kpi_val)
          echartsMDT.push(echartsETCB[i].kpi_dt)this.myChartm.setOption({
            title: {
              text: echartsMname,//可以写死 也可以用后台传回来的数据 title
              left:'center'
},
            xAxis: [
              {
                type: 'category',
                data: echartsMDT,//绑定数据
                axisTick: {
                  alignWithLabel: true
}
              }
            ],
            series: [
              {
                type: 'bar',
                barWidth: '60%',
                data:echartsMval//绑定的数据
              }
            ]
          })
        }
      })
    }
  }
</script>
<style scoped>
</style>

1.需求场景，产品详情参数为动态数据，包括标题和选项

2.包含两种选择放式，下拉选项picker和手动输入input

假如现在有8组属性，要匹配到对应下标和input回写变量

3.思路，data声明一个数组listindex，用于存储picker下标和input默认值，获取8组详情参数，往数组listindex添加8组数据的key和value，页面循环的时候pinker[listindex[index].attributeValue]下标就用，input默认值为listindex[index].attributeValue