vue中echarts怎么用,echarts仪表图
这篇文章主要为大家详细介绍了某视频剪辑软件使用展示定制特殊的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用展示定制特殊仪表盘的具体代码，供大家参考，具体内容如下
实现的效果：(初始化以及浏览器调整大小的时候数字和弧形条均为递增动画)
超文本标记语言部分：
！-为展示准备一个具备大小（宽高)的多姆
div class= main-echarts-conti aner
ref=main
/div
半铸钢钢性铸铁(铸造半钢)部分：main-echarts-contianer {
宽度：480像素
高度：320像素
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
}
射流研究…部分：
drawClockChart () {
//指定图表的配置项和数据
let option={
系列:[
{
姓名: 个人指标，
类型:仪表，
半径: 65% ,
起始角度: 240 ,
endAngle :-60 ，
//图表的刻度分隔段数
splitNumber: 5，
//图表的轴线相关
轴线：
show: true，
线条样式：
颜色:[
[
0.9,
新的这个图表。图形。线性梯度(0，0，1，0，[{
偏移量：0,
颜色： #FFD900
},
{
偏移量：1,
颜色： #FF8000
}
])
],
[1， #56606E]
],
宽度:15
}
},
//图表的刻度及样式
轴棒:{
线条样式：
颜色： #0F1318 ，
宽度:2
},
长度:15,
【拆分数量】:1
},
//图表的刻度标签(20、40、60等等)
axisLabel: {
距离:-8,
textStyle: {
颜色： #9E9E9E
}
},
//图表的分割线
分割线:{
show: false
},
//图表的指针
指针:{
show: false
},
//图表的数据详情
详细信息：
格式化程序:函数（参数){
返回{title 总体得分} \n {score params }
},
offsetCenter: [0，0]，
丰富：
标题:{
fontSize: 12，
颜色： #9E9E9E ，
行高:30
},
分数:{
fontSize: 27，
颜色： #fff
}
}
},
//图表的标题
标题:{
offsetCenter: [0， 90%]，
颜色： #fff ，
fontSize: 14
},
数据:[{
姓名: 完成，
值:31
}]
},
{
姓名: 外层线，
类型:仪表，
半径: 72% ,
起始角度: 240 ,
endAngle :-60 ，
中心:[50% , 50%],
轴线：
线条样式：
宽度:1,
color: [[1， #56606E]]
}
},
分割线:{
长度:-6,
线条样式：
"不透明度":0
}
},
axisLabel: {
show: false
},
轴棒:{
splitNumber: 1，
线条样式：
"不透明度":0
}
},
详细信息：
show: false
},
指针:{
show: false
}
}
]
}
让tempVal=0
清除间隔(这个。时钟图表计时器)
这个。clockchartimer=setInterval(()={
if(tempVal this。myivstrability){
清除间隔(这个。时钟图表计时器)
//最后转到最终数据的地方
选项。系列[0]。数据[0]。value=this.myIvstrAbility
选项。系列[0]。轴线。线条样式。color[0][0]=this。myivstrability/100
//使用刚指定的配置项和数据显示图表
this.myChart.setOption(选项)
//初始化渲染完成
this.renderCompleted=true
返回
}
选项。系列[0]。数据[0]。值=临时值
选项。系列[0]。轴线。线条样式。颜色[0][0]=临时值/100
//使用刚指定的配置项和数据显示图表。
this.myChart.setOption(选项)
tempVal
}, 20)
//此处监听浏览器的调整大小，重新渲染图表
让那个=这个
窗户。addevent侦听器( resize ，function () {
clearTimeout(that.resizeTimer)
that . resize timer=setTimeout(()={
myChart.resize()
}, 500)
})
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。