南格丁echarts图(半径模式)
if (this.myMiddleChart != null && this.myMiddleChart !== '' && this.myMiddleChart !== undefined) {
this.myMiddleChart.clear()// 清除数据,图例
} else {
var chartDom = this.$refs.pieChart
this.myMiddleChart = this.$echarts.init(chartDom)
}
var option
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#64D2FF', '#FFCC00', '#FF9500', '#FF5712', '#FF3B30'],
series: [
{
name: '半径模式',
type: 'pie',
radius: [30, 140],
center: ['50%', '50%'],
roseType: 'radius',
// itemStyle: {
// borderRadius: 5
// },
minAngle: 30,
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#010019'
}
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: pieData
}
]
}
option && this.myMiddleChart.setOption(option)
手动实现类似南格丁echarts
优点: 每块占得角度一致,半径差距相同,颜色顺序排列
缺点:模块未按照从大到小顺序排列;为实现圆形剩余部分虚线,采用重叠放置,所以不可点击
if (this.myMiddleChart != null && this.myMiddleChart !== '' && this.myMiddleChart !== undefined) {
this.myMiddleChart.clear()// 清除数据,图例
} else {
var chartDom = this.$refs.pieChart
this.myMiddleChart = this.$echarts.init(chartDom)
}
var option
let colorData = ['#64D2FF', '#FFCC00', '#FF9500', '#FF5712', '#FF3B30']
let dataArray = pieData.map((item, index) => {
return {
name: '半径模式',
type: 'pie',
radius: [20, 140 - 30 * index],
center: ['50%', '50%'],
startAngle: 90 - 72 * index,
// roseType: 'false',
// itemStyle: {
// borderRadius: 5
// },
z: pieData.length - index,
minAngle: 30,
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#010019'
}
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{
itemStyle: {
color: colorData[index]
},
...item
},
{
name: '补充',
value: 4 * item.value,
itemStyle: {
color: 'rgba(255,255,255, 0)',
borderType: 'dashed',
borderColor: '#272727',
borderWidth: 1
}
}]
}
})
// console.log(dataArray)
option = {
// tooltip: {
// show: false,
// trigger: 'item',
// formatter: '{b} <br/> {c} ({d}%)'
// },
series: dataArray
}
option && this.myMiddleChart.setOption(option)
手动实现类似南格丁echarts
优点: 每块占得角度一致,半径差距相同,排序前固定每个series的颜色,
缺点:为实现圆形剩余部分虚线,采用重叠放置,所以不可点击
// 1.给原始数组每项设置颜色
handleData(res){
let getData = []
let colorData = ['#64D2FF', '#FFCC00', '#FF9500', '#FF5712', '#FF3B30']
getData = res.data.map((item, index) => {
return {...item, color: colorData[index]}
})
this.initPie(getData)
}
initPie (pieData) {
if (this.myMiddleChart != null && this.myMiddleChart !== '' && this.myMiddleChart !== undefined) {
this.myMiddleChart.clear()// 清除数据,图例
} else {
var chartDom = this.$refs.pieChart
this.myMiddleChart = this.$echarts.init(chartDom)
}
// 2.对已设置颜色数组进行从大到小排序
let newData = JSON.parse(JSON.stringify(pieData))
newData.sort((a, b) => {
return b.value - a.value
})
var option
let dataArray = newData.map((item, index) => {
return {
name: '半径模式',
type: 'pie',
radius: [20, 140 - 25 * index],
center: ['50%', '50%'],
startAngle: 90 - 72 * index,
// roseType: 'false',
// itemStyle: {
// borderRadius: 5
// },
silent: true,
z: pieData.length - index,
minAngle: 30,
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#010019'
}
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{
itemStyle: {
color: item.color
},
...item
},
{
name: '补充',
value: 4 * item.value,
itemStyle: {
color: 'rgba(255,255,255, 0)',
borderType: 'dashed',
borderColor: '#272727',
borderWidth: 1
}
}]
}
})
// console.log(dataArray)
option = {
series: dataArray
}
option && this.myMiddleChart.setOption(option)
},
成果图