Vue仪表盘样式vue代码
<div class="title"><img class="imgtitle" src="static/images/integral.png" alt=""><span class="titlespan">总计</span></div>
<div class="water-echart">
<div id="myChartsa" style="width:100%;height:5.4rem;margin: 0 auto;"></div>
</div>
Vue仪表盘样式js代码
drawLine(){
// 基于准备好的dom，初始化echarts实例
var option = {
// backgroundColor: '#003885',
tooltip: {
// formatter: '{a} <br/>{b} : {c}%'
},
series: [{
name: '总计',
type: 'gauge',
center: ['50%', '30%'], // 默认全局居中，，，
radius: '50%',
min: 0,
max: 90,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.09, '#1e90ff'],
[0.82, '#1e90ff'],
[1, '#1e90ff']
],
width: 6,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
//刻度标签。
axisLabel: {
color: "#fff",
},
pointer: {
length:'85%',
},
title: {
offsetCenter: [0, '68%'], // x, y，单位px
fontWeight: 'bolder',
fontSize: 15,
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10,
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontFamily:"YourWebFontName",
formatter: "{value}/90",
offsetCenter: [0, 0],
backgroundColor: '#081327',
// shadowColor:"red",
color : "#fff",
shadowBlur:44,
borderRadius:58,
borderColor:'#0d2049',
borderWidth:1,
width:74,
height:84,
lineHeight: 84,
rich : {
score : {
color : "#fff",
fontSize : 17,
padding:0
}
}
},
data: [{value: 47, name: '数字资产登记数量'}]
},{
name: '外侧线条',
type: 'gauge',
//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
startAngle: 225,
//结束角度。
endAngle: 84,
center: ['50%', '30%'], // 默认全局居中
//半径
radius: '55%',
//仪表盘轴线相关配置。
axisLine: { // 坐标轴线
show:true,
lineStyle: { // 属性lineStyle控制线条样式
width: 3,
color:[
[1,new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0.1,
color: "#07182c"
},
{
offset: 0.3,
color: "#ced9eb"
},
{
offset: 0.6,
color: "#ced9eb"
},
{
offset: 1,
color: "#ced9eb"
}
])
]
]
},
},
//分隔线样式。
splitLine: {
show: false,
},
//刻度样式
axisTick: {
show: false,
},
//刻度标签。
axisLabel: {
show:false,
},
//仪表盘指针。
pointer: {
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
show: false,
},
//仪表盘标题。
title: {
show: false
},
//仪表盘详情，用于显示数据。
detail: {
show: false,
offsetCenter: [0, '-10%'],
formatter: '',
textStyle: {
fontSize: 0
}
},
data: [
{name:'数量', value:'n'},
],
zlevel:3
}],
};
let myChart = this.$echarts.init(document.getElementById('myChartsa'));
myChart.setOption(option);
}
