vue-echart,vue-echarts文档
这篇文章主要介绍了某视频剪辑软件中使用展示的步骤，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
1:首先要用到展示
2:在某视频剪辑软件中安装这个依赖
3:引入要用的页面
从“电子海图”导入电子海图；
4:然后初始化
模板
a-col span= 12 style= min-height:343 px；宽度：100%;background:# fff ref= getwidth :style= display: model
div class= layui-col-md6 tjgx-panel
div class=layui-card
div class= layui-card-header panel-title
span class=left-text 统计更新及时率/span
close-link right-text @ click= on hide
a-icon type= close style= color:# b0b0b 0；/
/a
div class= right-text style= color:# b0b0b 0；
span v-for=(item，index) in activeList :key=index
:class=item.is_active？主动:
@click.stop=Onactive(item，index)
class= week ref= list“{ item。name } }/span
！- span class=month 本月/span
span class=年份本年/span -
/div
/div
div class=" la yui-card-body common-height "
埃查尔兹莫德尔
:Maxwidths=widths
:MinHeight=MHeight
:echartsColor=xAxis.color
:legendWAndH=legendWAndH
:xAxisData=xAxis.data
:seriesData=xAxis.x.data
:SerNameValue=xAxis . SerNameValue
:echartsName=xAxis.name
/
！-div class= tjgx-con id= container style= min-height:280 px；:style= 宽度：宽度像素/div -
/div
/div
/div
/a列
/模板
脚本
从导入埃查尔兹莫德尔././viewModal/Echarts
//从“电子海图”导入电子海图；
导出默认值{
组件：{
埃查尔兹莫德尔
},
data(){
返回{
型号："块",
宽度：,
传说：[15,15,18],
身高：,
xAxis:{
数据：[广州, 深圳, 珠海, 汕头, 佛山, 韶关, 湛江, 肇庆, 江门, 茂名, 惠州, 梅州, 汕尾, 河源, 阳江, 清远, 东莞, 中山, 潮州, 揭阳, 云浮],
x:{
数据：【7.9,2,6,5,7,5,7,80,6,7,6,86,6,56,7,6,8,5,4,7,8】,
//数据：[87.9,58,67,56,72,54,74,59,64,75,68,47,63,89,78,64,82,56,40,73,80],
},
名称：及时率, //图表名称
SerNameValue:{
位置："顶部",
颜色： #3398DB ，//
},
//color: //图表颜色
颜色： #3398DB //图表颜色
},
活动列表：[
{
名称：本周，
is_active:true，
},
{
名称：本月，
is_active:false，
},
{
名称：本年，
is_active:false，
},
]
}
},
已安装(){
this.widths=String((this .$参考文献。获取宽度。$ El。客户端宽度)-30)；//画布宽度
这个MH height=String((这个.$参考文献。获取宽度。$ El。客户身高)-68)//画布高度
},
方法：{
onHide(){
const _ this=这个
_ this.model= none
_这个. emit(isHide ，_this.model，0)
},
Onactive(val，index){
const _this=这个
let Alist=_this.activeList
让长度=_this .$参考文献。列表。长度
让axis=_this.xAxis
设sumber=0；
设arr=[]；
对于(设t=0；t长度；t ){
列表[t]is _ active=false
}
if( val.name==本周 ){
sumber=1
}else if ( val.name==本月 ){
sumber=1
}else if( val.name==本年 ){
sumber=1
}
列表[索引]。is _ active=true
axis.x.data.map(item={
item=sumber
数组推送(项目)
})
轴。十。数据=数组
_this.xAxis=axis
_ this.activeList=Alist
}
}
}
/脚本
样式范围
/* .周{
填充：0 1%;
} */。拉用户-卡片-表头{
位置：相对；
高度：42px
行高：42px
填充：0 15px
border-bottom:1px solid # f6f 6 f 6；
颜色：# 333;
border-radius:2px 2px 0 0；
字体大小：14px
}。普通高度{
高度：280像素
}。拉易卡{
边距-底部：15px
边框-半径：2px
背景色：# fff
方框阴影：0 1px 2px 0 rgba(0，0，0，05);
}。拉易-卡片-正文{
位置：相对；
填充：10px 15px
行高：24px
}。layui-col-md20 {
宽度：20%;
}。时间-城市-面板{
显示：flex！重要；
justify-content:space-between；
对齐-项目：居中；
}。时间-城市-面板img {
宽度：73px！重要；
身高：61px！重要；
填充：0 10px 10px！重要；
}。时间-城市-面板。单行的，时间-城市-面板。两行{
填充：0 10px
}。时间-城市-面板。单行p:第一种类型{
字体大小：18px
字体粗细：粗体；
填充：0 0 10px
文本对齐：左对齐；
}。时间-城市-面板。双排p:第一种类型{
填充：0 0 10px
颜色：# 96acbc
字体粗细：粗体；
行高：22px
}。db_img {
宽度：20px
高度：22px
保证金：0 5px
垂直对齐：居中；
}。面板-标题。左侧文本{
左填充：10px
边框-左侧：8px纯色# 239fe6
字体大小：20px
显示：内嵌-块；
高度：30px
行高：30px
垂直对齐：居中；
}。面板-标题。右文本{
浮动：对；
颜色：# 239fe6
字体大小：14px
左边距：15px
}
/*筒高度*/。普通高度{
高度：280像素
}。文本溢出{
空白：nowrap
溢出：隐藏；
文本溢出：省略号；
}。tjgx-面板。右侧文本范围，ajtj-面板。右侧文本范围{
显示：内嵌-块；
颜色：# b0b0b0
}。tjgx-面板。右文本span .主动。ajtj-面板。右侧文本span.acitive {
颜色：# 239fe6
}
#图表，
#ajtjChart {
宽度：100%;
身高：90%;
}
/风格
5:电子海图组件
模板
差异
！- style=最小高度：280像素-
div id= Echarts :style= width: Maxwidths px；最小高度：最小高度像素 /格
！-div id= e charts v-if= is grid==false :style= width: Maxwidths px；高度：最小高度像素 /格-
/div
/模板
脚本
从“电子海图”导入电子海图；
从"电子图表/lib/export "导入{ number }；
导出默认值{
道具：{
Isgrid:{
类型：布尔型，
默认值：()=true //默认显示柱状图
},
ss:{
类型：对象，
默认值：()={}
},
最大宽度：{
类型：字符串，//整个容器的宽度
默认值：""
},
最小高度：{
类型：字符串，//最小高度
默认值：""
},
echartsColor:{ //图像的颜色
类型：字符串，
默认值：""
},
legendWAndH:{ //图例的宽高位置等
类型：数组，
默认值：()=[15,15,18]
},
legendColor:{
类型：字符串，
默认值：()= //图例的颜色，如果不加则默认是图形颜色
},
xAxisData:{ //图形X轴的数据
类型：数组，
默认值：()=[]
},
YAxisName:{ //图形y轴的名称设置数组或者百分比
类型：对象，
默认值：()={}
//默认值：{姓名： 111 ，格式化程序：" {value}%}
},
系列数据：{
类型：数组，//显示图像的数据占据的多少
默认值：()=[]
},
SerNameValue:{ //图形数据分析的占据的位置左上右下和显示的颜色
类型：对象，
默认值：()={}
//默认值：{position:top，color:“# 3398 db”，格式化程序：" { c } %"}
},
echartsName:{ //图形的名称
类型：字符串，
默认值：()=柱状图
},
XorYatter:{
类型：数组，
默认值：()=[{value}% ， {c}%] //默认为百分比
},
//雷达图的参数
gWidth:{ //宽度默认为百分百
类型：字符串，
默认值：()=100
},
盖特：{
类型：字符串，
默认值：()=90 //高度默认为90
},
gridValue:{ ///雷达图的名称等等格式[{text:11}]
类型：数组，
默认值：()=[]
},
格里德劳斯：{ //圆圈大小
类型：数量，
默认值：()=80 //默认为80
},
gridTextStyle:{ //名称的默认颜色文本
类型：字符串，
默认值：()=#6bbcef
},
symbolSize:{ //圆点的大小
类型：数量，
默认值：()=10
},
服务值：{
类型：数组，
默认值：()=[] //网格里面对应的数值
},
serVcolor:{
类型：字符串，
默认值：()=#1bbdf8 //数值的默认颜色服务值的
},
线条样式颜色：{
类型：字符串，
默认值：()=#1cbdf8 //连接线的颜色
},
itemStyleColor:{
类型：字符串，
默认值：()=#1cbdf8 //连接圆点的默认颜色
},
BgColor:{
类型：字符串，
默认值：()= rgba(189230249，0.5)
}
},
data(){
返回{
选项：{
颜色：[],//图例颜色
图例：{
数据：[],//图例名称
项目宽度：0,//图例的宽度
项目高度：0,//图例的高度
右：0,
textStyle:{
颜色：""
}
},
xAxis:{
数据：[] //x轴数据
},
亚西斯：{
名称：,//名称
axisLabel:{
格式化程序： //是否显示百分比
}
},
系列：[
{
名称：,
类型： bar ，//类型
数据：[]，//X轴显示的数据
标签:{
正常：{
秀：真的，
位置：,
颜色：,
格式化程序：""
}
}
}
]
},
选项：{
雷达：[
{
指示器：[],//显示的名称的字段只能是文字ps:[{text:aaa}]
半径：0,//园角
名称：{
textStyle:{
颜色： //颜色
}
},
symbolSize:0，//圆点大小
}
],
系列：[
{
类型："雷达",
数据：[{
值：[],//对应的数据
标签:{
正常：{
秀：真的，
颜色：,//选中的时候颜色
格式化程序：(params)={
返回参数值
}
}
},
//连接线颜色
线型：{
颜色：,
},
//连接圆点颜色
项目样式：{
颜色：""
},
//图表背景网格的颜色
区域样式：{
正常：{
不透明度：0.9,
颜色：""
}
}
}]
}
]
}
}
},
已创建(){
const _ this=这个
console.log(_this .Isgrid)
console.log(这个。电子海图)
如果(_这个Isgrid ){
_this.onloads() //初始化数据
}否则{
_this.isInitGrid()
}
},
已安装(){
const _ this=这个
if(_this.ss){
_this.option={}
_这个。option=_ this。ss；
}
setTimeout(()={
_这个. nextTick(()={
让e图=e图。init(文档。getelementbyid( e charts ))
Echarts.setOption(_this.option，true)
})
},500)
},
观察：{
seriesData(val){
this.seriesData=val
this.onloads(true)
}
},
方法：{
加载（是){
const _ this=这个
让op=_this。选项
op.color=[_this.echartsColor]
传奇故事。data=[_ this。echartsname]
传奇故事。项目宽度=_ this。图例wandh[0]
传奇故事。项目高度=_ this。传奇万德[1]
右=_this.legendWAndH[2]
传奇故事。文本样式。color=_这个。legend color== ？_this.echartsColor:" "
op.xAxis.data=_this.xAxisData
你好。name=_ this。echartsname
你好。轴标签。formatter=_ this .XorYatter[0]
操作系列[0]。data=_this.seriesData
操作系列[0]。name=_this.echartsName
操作系列[0]。标签。正常。位置=_ this .SerNameValue.position
操作系列[0]。标签。正常。formatter=_ this .XorYatter[1]
操作系列[0]。标签。正常。color=_这.SerNameValue.color== ？_this.echartsColor:_this .SerNameValue.color
_ this.option=op
如果（是){
_这个. nextTick(()={
让e图=e图。init(文档。getelementbyid( e charts ))
Echarts.setOption(op，true)
})
}
},
isInitGrid(){
const _ this=这个
让g=_ this.options
雷达[0].indicator=_this.gridValue
雷达[0].radius=_this.gridraius
g。雷达[0]。姓名。文本样式。color=_这个。网格文本样式
雷达[0].symbolSize=_this.symbolSize
g系列[0]。数据[0]。值=_这个。服务值
g系列[0]。数据[0]。标签。正常。color=_这个。服务器颜色
g系列[0]。数据[0]。线条样式。color=_这个。线条样式颜色
g系列[0]。数据[0]。项目样式。color=_这个。项目样式颜色
g系列[0]。数据[0]。区域样式。正常。color=_这.背景颜色
}
}
}
/脚本
6:效果图
以上就是某视频剪辑软件中使用展示的步骤的详细内容，更多关于某视频剪辑软件使用展示的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。