四步学会使用ECharts做图

前言：最近有些朋友抱怨用ECharts做统计图时难做，看官网很枯噪无味头又晕，那接下来我简单说下我是怎么四步做图的。
首先先引入安装ECarts依赖，使用webpack工具打包的可以使用命令行安装
npm install echarts --save
然后在局部或全部引入
var echarts = require(‘echarts’)
四步走：
1.划分好容器，定好容器的宽高

<div style="height: 500px; width: 500px;" ref="useAxis"></div>

2.让容器初始化echarts,init进容器中

const useAxis = echarts.init(this.$refs.useAxis)

3.填入配置图表的信息

let option = {
  legend: {}, //配置图例
  xAxis: {},  //配置x轴
  yAxis: {}, //配置y轴
  series: [{}] //关键的一步，配置系列列表和数据
}

4.容器使用配置信息显示图表

useAxis.setOption(option)

做图，首先要有思路，先把代码结构搭出来，先填入里面的配置项，这样清晰的思路让我们在日常开发中提高效率，不会太被动
例如以下折线统计图绘制：

<template>
  <div>
    <div ref="stLine" style="height: 500px;width: 900px;"></div>
  </div>
</template>
<script>
var echarts = require('echarts');
export default {
mounted() {
  this.getEchartsInfo()
},
methods: {
    getEchartsInfo() {
      const exLine = echarts.init(this.$refs.stLine);
      let exion = {
        xAxis: {},
        yAxis: {},
        tooltip: {},
        series: [{}]
      };
      exLine.setOption(exion);
	}
  }
}
</script>

代码结构搭已经搭好，接下来一个一个配置信息进去

<template>
  <div>
    <div ref="stLine" style="height: 500px;width: 900px;"></div>
  </div>
</template>
<script>
var echarts = require('echarts');
export default {
mounted() {
  this.getEchartsInfo()
},
methods: {
    getEchartsInfo() {
      const exLine = echarts.init(this.$refs.stLine);
      let exion = {
        xAxis: {
          position: 'bottom',
          name: '月',
          nameTextStyle: {
            color: '#ff00ff'
          },
          axisLine: {
            lineStyle: {
              color: '	#ffa500'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#ff00ff'
          },
          data: ['1','2','3','4','5','6','7','8','9','10','11','12']
        },
        yAxis: {
          name: '次',
          align: 'right',
          nameTextStyle: {
            color: '#ff00ff'
          },
          axisLine: {
            lineStyle: {color: '#ffa500'}
          },
          axisTick: {show: false},
          splitLine: {show: false},
          max: 120
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}月份{c}次'
        },
        series: [
          {
            type: 'line',
            data: [10,21,44,56,47,86,75,30,2,85,36,69]
          }
        ]
      };
      exLine.setOption(exion);
	}
  }
}
</script>

到此一个简略的折线统计图已经出来了，四步走起来，ECharts使用起来很是轻松，需要用ECharts参考下，觉得对自己有参考价值的点个赞再走呗！