为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第18天...

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

2022.11.10 13:53 30浏览

课程名称: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学习成本偏低些,可以快速入门学习

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
13

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消