版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
首先在安装echarts依赖库的情况下,详情可以参考我的上一篇博客
第一步在命令行或者控制台引入liquidfill:
npm install echarts-liquidfill
第二步:在项目的main.js文件引入liquidfill
在component下面新建一个vue文件,具体代码如下:
<template>
<div>
<div id="myChart"></div>
<div id="ms">{{msg}}</div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎大家关注我',
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
series: [{
type: 'liquidFill',
radius: '50%',
data: [0.6],
color: 'rgba(77,205,110,100)',
label: {
normal: {
color: '#fff',
insideColor: 'transparent',
textStyle: {
fontSize: 16,
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei'
}
}
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: 'rgba(67,209,100,1)',
borderWidth: 2
}
},
backgroundStyle: {
color: 'rgba(67,209,100,.3)'
}
}]
});
}
}
}
</script>
<style scoped>
#myChart{
width: 500px;
height: 500px;
margin: 0 auto;
}
</style>
最后路由修改一下:
运行看看效果:
扫描二维码关注公众号,回复:
7603994 查看本文章
关注我,哈哈: