vue 结合 Echarts 实现半开环形图

Echarts 实现半开环形图

1.先看看实现的图

2.HTML部分

创建id 是 chart 的div标签。


<div class="content-item">
<div id="chart" style="width:300px;height:300px"></div>
</div>

3.封装的 option

• import { getAnnulusOption } from './option.js'

下面内容是 文件 option.js (可以直接复制)

function deepCopy (obj) {
let newObj
// 如果不是数组对象，并且对象存在，直接返回就可以
if (obj && typeof obj !== 'object') {
newObj = obj
return newObj
}
var targetObj = obj.constructor === Array ? [] : {}
for (var keys in obj) {
if (obj.hasOwnProperty(keys)) {
if (obj[keys] && typeof obj[keys] === 'object') {
targetObj[keys] = obj[keys].constructor === Array ? [] : {}
targetObj[keys] = deepCopy(obj[keys])
} else {
targetObj[keys] = obj[keys]
}
}
}
return targetObj
// return JSON.parse(JSON.stringify(obj));
}const annulusOption = {
title: {
text: '',
subtext: '',
x: 'center',
y: 'center',
textStyle: {
fontSize: 26,
color: '#5b92fe'
},
subtextStyle: {
fontSize: 12,
color: '#616161'
}
},
color: [],
series: [
{
type: 'pie',
radius: ['65%', '85%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
}
},
hoverAnimation: false,
startAngle: -45,
data: [{ value: 25 }, { value: 0 }, { value: 0 }]
}
]
}/**
* 获取环形图的data，这个图只用于半开环形图， 并且只能有两个数据输入
* @param {Number[2]} data 两个数据，环形从做到右的数据
* @param {string[2]} colors 两个数据的颜色
* @param {*} text 中心的主标题
* @param {*} subtext 中心的副标题
* @param {Number} textFontSize
* @param {Number} subTextFontSize
*/
function getAnnulusOption (data, colors, text, subtext, textFontSize, subTextFontSize) {
let resultOption = deepCopy(annulusOption)
let optionColor = ['rgba(0,0,0,0)']
optionColor = optionColor.concat(colors)
resultOption.color = optionColor
resultOption.title.text = text
resultOption.title.subtext = subtext
resultOption.title.textStyle.fontSize = textFontSize
resultOption.title.subtextStyle.fontSize = subTextFontSize
let firstData = data[0] || 0
let secondData = data[1] || 0
resultOption.series[0].data[1].value = 75 * firstData / (firstData + secondData)
resultOption.series[0].data[2].value = 75 * secondData / (firstData + secondData)
return resultOption
}export { getAnnulusOption }

4.JS部分

<script>//1.引入上面 创建的 option.js import { getAnnulusOption } from './option.js'//2.引入 echarts 图表插件import echarts from 'Echarts'export default {
mounted() {
this.$nextTick(() => {
this.renderChart('chart',890, 1000)
})
},
methods: {
/**
* @param {String} id 获取HTML div元素的 ID,
* @param {Number} dividend 数值1 ，（成功个数）
* @param {Number} divisor 数值2，（总数）
*/
//id,
//dividend
//divisor
renderChart (id,dividend, divisor) {
echarts.dispose(document.getElementById(id))
const data = [dividend, divisor - dividend]
const colors = ['#4b7efe', '#beddff']
const percentage = divisor === 0 ? 0 : dividend / divisor * 100
const text = formatValue(percentage, 1) + '%'
const subText = ''
const textFontSize = 20
const subTextFontSize = 0
const option = getAnnulusOption(data, colors, text, subText, textFontSize, subTextFontSize)
const charts = echarts.init(document.getElementById(id))
charts.setOption(option)
}, /**
* @param {number or string} value 数值
* @param {Number} digits 保留小数位数
* @param {bool} returnStr 返回值是字符串（如果保留位数那么返回是一个string）
*/
formatValue (value, digits, returnStr = false) {
if (digits < 0) {
console.log('小数点后位数不能为负数')
value = 0
}
if (!value) {
value = 0
}
if (returnStr) {
return parseFloat(value).toFixed(digits)
}
return parseFloat(parseFloat(value).toFixed(digits))
} }}</script>