Echarts:极坐标柱状图标签自定义
效果
实例代码
<template>
<div class="echart-app">
<div id="main"></div>
<p class="num top1">80.09%</p>
<p class="num top2">64.34%</p>
<!-- 数据 -->
<div class="text">
<p class="p1">数据1 xxxxxx</p>
<p class="p2">数据2 xxxxxx</p>
</div>
</div>
</template>
<script>
export default {
mounted(){
this.into()
},
methods:{
into(){
var chartDom = document.getElementById('main');
var myChart = this.$echarts.init(chartDom);
var option;
option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
title: {
text: '标题'
},
legend: {},
polar: {
radius: [90, '80%']
},
angleAxis: { // 极坐标系的角度轴
show:false, // 隐藏刻度
max: 110,
startAngle: 90 // 角度
},
radiusAxis: {
type: 'category',
},
tooltip: {
show: false
},
series: [
{
type: 'bar',
data: [
{
value: 100,
itemStyle: {
color: '#a90000'
}
},
{
value: 100,
itemStyle: {
color: '#006699'
}
}
],
coordinateSystem: 'polar',
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style lang="scss" scoped>
.echart-app{
position: relative;
#main{
width: 300px;
height: 300px;
position: relative;
}
.num{
position: absolute;
left: 98px;
font-size: 14px;
}
.top1{
top:13px
}
.top2{
top:28px
}
.text{
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
.p1::before{
content: '';
position: absolute;
top:20px;
left: -10px;
width: 8px;
height: 8px;
background-color: red;
border-radius: 4px;
}
.p2::before{
content: '';
position: absolute;
top:54px;
left: -10px;
width: 8px;
height: 8px;
background-color: blue;
border-radius: 4px;
}
}
}
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhihk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13