课程名称：Vue + EChart 4.0 从0到1打造商业级数据报表项目

课程章节：顶部组件完善\vue-echart/v-charts 入门
课程讲师： Sam

课程内容：
绘制三角形

{
type:'custom',
stack:"总量",  // 跟需要同步的stack一直
data:[200],// 跟需要同步的数值一直
renderItem:(params,api)=>{ // 自定义绘制图表
    ​const value = api.value(0)  // 获取自定义图标的值也就是200
​    ​const endPoint = api.coord([value,0]) //  获取自定义图标的坐标 
    ​return {
    ​    ​    ​type:'path',
    ​    ​    ​position:endPoint,
    ​    ​    ​shape:{
    ​    ​    ​    d:'',  // 自定义的图标可以在iconfont中复制svg中的d
    ​    ​    ​    ​x:0, // 自定义图标x的偏移量
    ​    ​    ​    ​y:0,// 自定义图标y的偏移量
    ​    ​    ​    ​width:20,// 自定义图标的宽度
    ​    ​    ​    ​height:20​// 自定义图标的高度
    ​    ​    ​},
    ​    ​    ​style:{
    ​    ​    ​    ​fill:'red' //自定义图标内部填充的颜色值
    ​    ​    ​}
    ​}
}
}    ​

绘制三角形组

{
type:'custom',
stack:"总量",  // 跟需要同步的stack一直
data:[200],// 跟需要同步的数值一直
renderItem:(params,api)=>{ // 自定义绘制图表
    ​const value = api.value(0)  // 获取自定义图标的值也就是200
​    ​const endPoint = api.coord([value,0]) //  获取自定义图标的坐标 
    ​return {
    ​    ​    ​type:'group',
    ​    ​    ​position:endPoint,
		    children:[
				{
					type:'path',
					​shape:{
		    ​    ​    ​    d:'',  // 自定义的图标可以在iconfont中复制svg中的d
		    ​    ​    ​    ​x:0, // 自定义图标x的偏移量
		    ​    ​    ​    ​y:0,// 自定义图标y的偏移量
		    ​    ​    ​    ​width:20,// 自定义图标的宽度
		    ​    ​    ​    ​height:20​,// 自定义图标的高度
					    layout:'cover'//  图标缩放比
		    ​    ​    ​},
		    ​    ​    ​style:{
		    ​    ​    ​    ​fill:'red' //自定义图标内部填充的颜色值
		    ​    ​    ​}
				},
				{
					type:'path',
					​shape:{
		    ​    ​    ​    d:'',  // 自定义的图标可以在iconfont中复制svg中的d
		    ​    ​    ​    ​x:0, // 自定义图标x的偏移量
		    ​    ​    ​    ​y:0,// 自定义图标y的偏移量
		    ​    ​    ​    ​width:20,// 自定义图标的宽度
		    ​    ​    ​    ​height:20​,// 自定义图标的高度
					    layout:'cover'//  图标缩放比
		    ​    ​    ​},
		    ​    ​    ​style:{
		    ​    ​    ​    ​fill:'red' //自定义图标内部填充的颜色值
		    ​    ​    ​}
				}
			]
    ​    ​    
    ​}
}
}  

layout 用于指定缩放策略。

可选值：

‘center’：保持原来的 PathData 的长宽比，居于矩形中，尽可能撑大但不会超出矩形。
‘cover’：PathData 拉伸为矩形的长宽比，完全填满矩形，不会超出矩形。
所有板块都可能用到的就称之为基础组件，而某个板块下用到的称之为业务组件

原来的调用echart的方法：代码比较冗长

写一个容器组件，写一个id

通过id找到dom

通过dom生成echart对象

echart对象setOption

百度官方提供一个和vue相关的组件库：vue-echarts

推荐使用vue-echarts，因为是官方，后续支持比较好
原来调用的cahart的方法：代码比较长

现在需要借助vue-echart来开发

安装：npm install echarts vue-echarts -S

首先在main.js中引入

import VueEcharts from ‘vue-echarts’

Vue.component(‘v-chart’,VueEcharts)

在index.vue中使用

<template>
<v-chart :options="data">
</template>
<script>
    export default{
        data(){
    ​    ​    ​data:{
			    ​xAxis:{
    ​                type:"category" 
    ​            }
    ​            yAxis:{},
    ​            series:[
    ​                type:"line",
    ​                data:['100','']
    ​            ]
    ​    ​    ​    ​}
        }
    }
</script>
<style>
</style>

使用v-charts

	// 安装v-charts:npm install v-charts echarts -S
	// plugins/vcharts.js
	import Vue from 'vue'
	import VELine from 'v-charts/lib/line.common'
	Vue.component('ve-line',VELine)
	// main.js 引入plugins/vcharts
	import './plugins/vcharts'
	// index.vue
	// template
	<ve-line :data="data" />
	// js
	export default{
		data(){
			return {
				data:{
					columns: ['日期', '访问用户', '下单用户'],
			        rows: [
			          { '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
			          { '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
			          { '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
			        ]
				}
			}
		}
	}
	

课程收获：
学习到了怎么自定义图形，并配自定义属性，设置layout可以配置自定义的缩放比，初始化认识了vue-echar，还有v-charts相对而言vue-echarts学习成本偏低些，可以快速入门学习