echarts使用总结

1、项目中用到的一些属性 

// 初始化echart实例var echart = echarts.init(document.getElementById("container"));// 定义选项var option = {// 标题title:{text:"前端大讲堂数据"},// 鼠标提示tooltip:{},// 图例legend:{data:["人数","人气","年龄分布"]},// x轴线xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},// y轴线yAxis:{},// 系列数据series:[// 名称，类型：柱状图，数据data{name:"人数",type:"bar",data:[1000,800,500,900,1300]},// type:"line" 线状图   smooth:true 圆滑曲线（不加为折线）// areaStyle:{color:'#f70'} 面积区域{name:"人气",type:"line",smooth:true,data:[200,350,1500,900,1400]},// radius:"15%"   实心圆形图{name:"年龄分布",type:"pie",radius:["15%","5%"],left:"-50%",top:"-55%",data:[{name:"少年",value:20},{name:"青年",value:50},{name:"中年",value:30},{name:"老年",value:8}]}]};// 设置参数echart.setOption(option)

2、echart初始化的时候获取不到节点

这是因为页面dom节点未初始化完成，所以可能会拿不到dom节点，可以用下面vue方法等待节点渲染完成或者setTimeout加一个延时获取该节点

this.$nextTick(() => {  this.domTop = echarts.init(document.getElementById('water-chart-top'))})

 3、echart渲染的canvas高度，宽度为0

有时候需要动态的渲染echart，会用到用vue的v-show或者v-if语法，这时候会遇到宽高为0的情况。宽度设置100%,内部会把100%转化为100px哦（自行了解）。这时候你可以在页面初始化的时候获取一个在页面一直显示的父级节点的高度。然后在echart渲染的时候重新设置宽高

created() {     //页面渲染的时候，获取一个页面存在的父级节点的宽高     var container=document.getElementById('app')     this.height=container.offsetHeight-97     this.width=container.offsetWidth },...//echart图表v-show为true的时候重新设置宽高this.line_echart=echarts.init(document.getElementById('line-echart'))this.line_echart.resize({height:this.height-40,width:this.width})