https://blog.csdn.net/qq_42597536/article/details/90056775
大佬连接可以直接用 我把它封装成组件了
<div :class="className" :style="{height:height,width:width}" style="margin-top: 35px"/>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
// 标题
text: '补贴资金剩余',
textStyle: {
// 标题的样式
color: '#888', // 字体颜色
fontFamily: 'Microsoft YaHei', // 字体
fontSize: 14,
fontWeight: '400',
align: 'center', // 文字的水平方式
baseline: 'middle',
position: 'inside',
verticalAlign: 'middle', // 文字的垂直方式
},
left: 'center', // 定位
top: '20%',
},
series: [
{
type: 'liquidFill',
radius: '95%',
waveAnimation: true,
data: [
{
value: 0.3,
direction: 'left',
itemStyle: {
normal: {
color: '#1890ff',
},
},
},
],
outline: {
// show: true , //是否显示轮廓 布尔值
borderDistance: 1, // 外部轮廓与图表的距离 数字
itemStyle: {
borderColor: '#1890ff', // 边框的颜色
borderWidth: 3, // 边框的宽度
// shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
// shadowColor: '#000' //外部轮廓的阴影颜色
},
},
itemStyle: {
opacity: 0.9, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
},
backgroundStyle: {
color: '#fff', // 图表的背景颜色
},
label: {
// 数据展示样式
show: true,
color: '#000',
insideColor: '#fff',
fontSize: 20,
fontWeight: 400,
align: 'center',
baseline: 'middle',
position: 'inside',
},
},
],
})
}
}
}
</script>
子要保证项目里引入了echarts 直接贴代码即可~~~~~~~~~