课程名称：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学习成本偏低些，可以快速入门学习
随时随地看视频
