vue echarts图表,vue echart图表
这篇文章主要为大家详细介绍了某视频剪辑软件实现展示中的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现展示中的仪表盘的具体代码，供大家参考，具体内容如下
最终结果
一、安装
1.首先需要安装展示依赖包
新公共管理安装echarts -S
2.或者使用国内的淘宝镜像：
NPM安装-g cnpm-registry=https://注册表。NPM。淘宝。（同organic）有机
二、创建图表
全局引入
主页。射流研究…
//引入展示
从"电子海图"导入电子海图
Vue.prototype.$echarts=echarts
你好100 . vue
div id= myChart :style= { width: 300 px ，height: 300px}/div
导出默认值{
data(){
返回{}
},
已安装(){
this.myChart() //函数调用
},
方法：{
myChart() {
设柱状=这个图表。init(文档。getelementbyid( myChart )；
专栏。setoption({
工具提示：{
格式化程序：" {a} br/{c} {b} "
},
工具箱：{
秀：真的，
功能：{
还原：{show: true}，
saveAsImage: {show: true}
}
},
系列：[
{
名称： 空气质量：,
类型："仪表",
z: 3，
最小值：0,
最高：500,
拆分数量：10
半径："60%",
轴线：{
线型：{
宽度：10,
颜色：[[0.1,绿色],[0.2,黄色],[0.3,橙色]，[0.4， db555e]，[0.5， ba3779]，[1.1， 881326] ]
}
},
轴棒：{
长度：15,
线型：{
颜色："自动"
}
},
//刻度分割线样式
分割线：{
长度：20,
线型：{
颜色："白色"
}
},
//刻度数字样式
axisLabel: {
fontWeight:粗体，
颜色： #0085FF ，
},
详细信息：{
//说明数字大小
格式化程序：函数（值){
返回值；
},
offsetCenter:[0% ， 80%]，
fontWeight:粗体，
borderRadius: 3，
背景色：“# 0085 ff”，
fontSize:14，
宽度：100,
颜色：白色，
填充：[5,15,2,15]
},
数据：[1,2,3,4,5,6,7]
},
{
名称：“PM2.5”:
类型："仪表",
中心：[20% , 55%],
半径："40%",
最小值：0,
最高：350,
价值：55,
角度：45度，
分裂数：5,
轴线：{
线型：{
宽度：8,
颜色：[[0.2,绿色],[0.4,黄色],[1.1,橙色] ]
}
},
轴棒：{
长度：12,
线型：{
颜色："自动"
}
},
分割线：{
长度：20,
线型：{
颜色："自动"
}
},
指针：{
宽度：5,
颜色：红色
},
//刻度数字样式
axisLabel: {
fontWeight:粗体，
颜色： #0085FF ，
fontSize:8，//改变仪表盘内刻度数字的大小
},
详细信息：{
格式化程序：函数（值){
返回值；
},
offsetCenter:[15% ， 75%]，
fontWeight:粗体，
borderRadius: 3，
背景色：“# 0085 ff”，
fontSize:14，
宽度：100,
颜色：白色，
填充：[5,15,2,15]
},
数据：[1,2,3,4,5,6]
},
{
名字： PM10:，
类型："仪表",
//仪表盘位置
中心：[79% , 55%],
//仪表盘半径
半径：“40%”，
最小值：0，
最高：500，
startAngle:130，
分裂数：5，
//仪表板弧形的宽度
轴线：{
线型：{
宽度：8，
颜色：[[0.2，绿色]，[0.4，黄色]，[1，橙色] ]
}
},
//仪表板小比例样式
轴棒：{
长度：12，
线型：{
颜色：“自动”
}
},
//仪表板大比例样式
分割线：{
长度：20，
线型：{
颜色：“自动”
}
},
//仪表板指针样式
指针：{
Width:5，//指针的宽度
长度： 60% ，//指针长度，根据半圆半径的百分比
ShadowColor:蓝色，//默认透明
暗影模糊：5
},
//刻度数字样式
axisLabel: {
fontWeight:粗体，
颜色：“自动”，
Tsize: 8，//改变仪表盘上刻度数字的大小
},
详细信息：{
//说明号码大小
格式化程序：函数(值){
返回值；
},
//仪表板下方的文本说明
offsetCenter:[0% ， 80%]，
fontWeight:粗体，
borderRadius: 3，
background color:“# 0085 ff”，
fontSize:14，
宽度：100，
颜色：白色，
填充：[5，15，2，15]
},
数据：[1，2，3，4]
}
]
})
}
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。