首页手记【金秋打卡】第18天...

【金秋打卡】第18天顶部组件完善\vue-echart/v-charts 入门

标签：

职场生活

课程名称：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 }
			        ]
				}
			}
		}
	}