echarts 仪表盘 文字位置_ECharts仪表盘样式

仪表盘截图

Vue仪表盘样式vue代码

总计

Vue仪表盘样式js代码

drawLine(){

// 基于准备好的dom，初始化echarts实例

var option = {

// backgroundColor: '#003885',

tooltip: {

// formatter: '{a}
{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);

}