全部请参考 www.makeapie.com/explore.htm…
let myChartTwo = this.$echarts.init(document.getElementById('echartssRight'));
let optionTwo = {
// tooltip: {
// formatter: '{a} <br/>{b} : {c}%',
// },
series: [
{
type: 'gauge',
radius: '80%',
pointer: {
show: false, //是否显示指针
},
progress: {
show: true,
// roundCap: true, // 是否在两端显示成圆形
width: 20, // 上层刻度宽度
},
min: 0,
max: 100,
itemStyle: {
color: 'rgb(37,182,111)', // 刻度颜色
},
axisLine: {
// roundCap: true,
lineStyle: {
color: [[1, 'rgba(40,95,84,0.8)']],// 仪表盘下层刻度底色
width: 20,// 仪表盘下层宽度
},
},
splitLine: {
show: false, //是否显示分隔线。
},
clockwise: true, //仪表盘刻度是否是顺时针增长。
axisTick: false, //是否显示刻度
splitNumber: 1, //分割线之间的刻度
// 起始点和最终点距离设置
axisLabel: {
show: true,
distance: -40,
color: '#5A5A89',
},
detail: {
// 仪表盘文字。
formatter: function(value) {
return value + '%';
},
color: '#fff',
fontSize: 22,
show : true, // title下面的文字(53)
offsetCenter: [0, '6%'],
},
title: {
// 仪表盘标题。
show: true,
offsetCenter: [0, '-10%'], // title圆环中心的距离
fontSize: 16,
color: '',
},
data: [
{
value: 73.5, // 后台返回的数据
name: '', // 根据后台数据定义名称(优,良)
},
],
},
{ // 最底层
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
z: 0,
itemStyle: {
normal: {
color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
offset: 0,
color: 'rgba(40,95,84,0.3)'
},
{
offset: .5,
color: 'rgba(40,95,84,0.3)'
},
{
offset: 1,
color: 'rgba(40,95,84,0.3)'
}
], false),
label: {
show: false
},
labelLine: {
show: false
}
},
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false
},
data: [100],
},
{// 内侧线
type: 'gauge',
z: 2,
radius: '50%',
startAngle: '160',
endAngle: '20',
//center: ["50%", "75%"], //整体的位置设置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, 'rgb(38,131,88)']
],
width: 1,
opacity: 1, //刻度背景宽度
}
},
splitLine: {
show: false
},
// data: [{
// show: false,
// value: '80'
// }], //作用不清楚
axisLabel: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
detail: {
show: 0
}
},
],
};
const seriesTwo = option.series[0]
// 仪表盘 刻度颜色 与 name颜色
seriesTwo.itemStyle.color = 'rgb(37,182,111)'
option && myChartTwo.setOption(optionTwo);
// echats 图表自适应
window.onresize = () => {
myChart.resize();
}
```