echarts 从入门到精通（1） --- 在vue中使用echarts

项目中各类统计和逼格展示或多或少都用到了echarts这种炫酷的第三方组件图标库，为了记录自己使用的过程，开一个记录贴

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

项目需求是在首页展示两个echarts图标显示两份统计的数据，用到的框架是vue
首先，npm下载echarts，并在vue中引用

// 项目中安装echarts
npm i echarts -S 
// 在main.js中引入echarts
import echarts from 'echarts' 

引入之后使用echarts时我个人习惯全局注册，使用时直接this.$echarts调用，也可以在对应的组件内按需引入后使用

// 注册echarts
Vue.prototype.$echarts = echarts 

安装完成，开始在页面中搞一个统计图出来，先来一个折线图，代码：

// template部分
<template>
    <div id="line_echarts">
        <div id="echarts"></div>
    </div>
</template>
<script>
export default {
    name: 'lineEcharts',
    data () {
      return {
        data: {
          x: ["2019-11-21","2019-11-22","2019-11-23","2019-11-24","2019-11-25","2019-11-26"],
          y: [20,50,80,70,45,85]
        }
      }
    },
    methods: {
        initEcharts () {
        	// 由于全局注册了echarts，在这边可以直接调用$echarts来初始化
            var myChart = this.$echarts.init(document.getElementById('echarts'))
            var option = {
                title: {
                    text: '统计图',
                    left: 'center',
                    top: '15'
                },
                tooltip: {
                    show: true,
                    axisPointer: {
                        type: 'cross'
                    }
                },
                xAxis: {
                    data: this.data.x,
                    axisTick : {
                    alignWithLabel: true
                    }
                },
                yAxis: {
                    axisLabel: {
                    formatter: '{value} %'
                    }
                },
                series: [{
                    name: '销量',
                    type: 'line',
                    data: this.data.y,
                    lineStyle : {
                        color:'#485e79'
                    },
                    itemStyle : {
                        color:'#485EFA'
                    }
                }]
            }
            myChart.setOption(option)
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.initEcharts()
        })
    }
}
</script>
<style lang="scss" scoped>
	#line_echarts {
	    width: 100%;
	    height: 100%;
	    div {
	        width: 100%;
	        height: 100%;
	    }
	}
</style>

效果如图：

这样一个统（装）计（逼）图就出来啦！