先看效果:
如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比:
首先是全部源码:
<div ref="country" id="country" class="drawing"></div>
<script setup>
// 引入图表
import * as echarts from "echarts";
const country = ref(null);
// 在项目中countryEcharts里面的data是我请求过来的数据,这里我就用json数据模拟了
// function countryEcharts(data) {
function countryEcharts() {
// 后台模拟数据
let data = {
countryType: [
{name: '总体',count:897},
{name: '个人',count:331},
{name: '法人',count:83},
{name: '自然人/法人',count:483},
],
unCountryType: [
{name: '总体',count:384},
{name: '个人',count:109},
{name: '法人',count:185},
{name: '自然人/法人',count:90},
],
}
const dataList = []; // x轴标签
const dataList1 = []; // 国家级
const dataList2 = []; // 我省覆盖
data.countryType.forEach(item => {
dataList.push(item.name) // x轴标签
dataList1.push(item.count) // 国家级
})
data.unCountryType.forEach(item => {
dataList2.push(item.count) // 我省覆盖
})
const myChart = echarts.init(country.value);
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['国家级','我省覆盖']
},
color: ['#73a0fa','#ff7100'],
grid: {
left: '2%',
right: '2%',
top: '14%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: dataList,
axisLine:{
lineStyle:{
color: '#7e7b7b' // x轴颜色
}
},
axisTick: { show: false }, // x轴坐标刻度样式（显示或者隐藏）
axisLabel: {
interval: 0,// 使x轴上的文字显示完全
},
},
yAxis: {
type: 'value'
},
series: [
{
barWidth: '30%',
name: '国家级',
type: 'bar',
data: dataList1,
//显示数值
/*itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //内部显示
formatter:function (params) {
return params.value/100 + '%';
},
textStyle: {
//数值样式
color: 'black',
fontSize: 12,
},
},
},
},*/
markPoint: {
symbol: 'image://http://example.website/a/b.png',
data: [
{coord: [0,dataList1[0]]},{coord: [1,dataList1[1]]},{coord: [2,dataList1[2]]},{coord: [3,dataList1[3]]}
],
label: {
show: true, //开启显示
formatter:function (params) {
// dataIndex是当前柱状图的索引
return dataList1[params.dataIndex];
},
},
symbolOffset: [0, '-30%'] // 偏移量
}
},
{
barWidth: '30%',
name: '我省覆盖',
type: 'bar',
data: dataList2,
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //内部显示
formatter:function (params) {
// dataIndex是当前柱状图的索引
let num = (dataList1[params.dataIndex] + dataList2[params.dataIndex])/dataList2[params.dataIndex]
num = Math.round(num*100)/100 // 保留两位小数,不四舍五入
return num + '%';
},
textStyle: {
//数值样式
color: 'black',
fontSize: 12,
},
},
},
},
markPoint: { // 标注
symbol: 'image://http://example.website/a/b.png',
data: [
{coord: [0,dataList2[0]]},{coord: [1,dataList2[1]]},{coord: [2,dataList2[2]]},{coord: [3,dataList2[3]]}
],
label: {
show: true, //开启显示
formatter:function (params) {
// dataIndex是当前柱状图的索引
return dataList2[params.dataIndex];
},
},
symbolOffset: [0, '-30%'] // 偏移量
}
}
]
})
}
<script/>蓝色柱子只在顶部显示数值(两种方法):
series: [
{
barWidth: '30%',
name: '国家级',
type: 'bar',
data: dataList1,
/*
itemStyle这种比较简单,直接通过position属性设置对应的位置就可以了
*/
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //顶部显示
textStyle: {
//数值样式
color: 'black',
fontSize: 12,
},
},
},
},
/*
下面这种是通过markPoint图表标注的方法来实现的
*/
/*markPoint: { // 图表标注
symbol: 'image://http://example.website/a/b.png',// 标注图形
// data是标注的数据数组
data: [
// coord是标注坐标[x,y]
// x轴的值就是根据你dataList1数组的索引
// y轴的值就是根据你dataList1数组索引所对应的值(在这里相当于y轴的高度)
{coord: [0,dataList1[0]]},{coord: [1,dataList1[1]]},{coord: [2,dataList1[2]]},{coord: [3,dataList1[3]]}
],
label: {
show: true, //开启显示
formatter:function (params) { // 这里就是标注所显示的值
// dataIndex是当前柱状图的索引
return dataList1[params.dataIndex];
},
},
symbolOffset: [0, '-30%'] // 标注偏移量
}*/
}
]橘色柱子要在顶部和内部都要显示并且内部显示百分比:
series: [
{
barWidth: '30%',
name: '我省覆盖',
type: 'bar',
data: dataList2,
//itemStyle对象里面显示的是内部的数据
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //内部显示
formatter:function (params) {
// dataIndex是当前柱状图的索引
// 这里柱状图的数值是dataList1(国家级数量)+dataList2(我省覆盖)的和除以dataList2(我省覆盖)
let num = (dataList1[params.dataIndex] + dataList2[params.dataIndex])/dataList2[params.dataIndex]
num = Math.round(num*100)/100 // 保留两位小数,不四舍五入
return num + '%';
},
textStyle: {
//数值样式
color: 'black',
fontSize: 12,
},
},
},
},
// markPoint对象里面是顶部的数据
markPoint: { // 图表标注
symbol: 'image://http://example.website/a/b.png',// 标注图形
data: [
//coord是标注坐标
{coord: [0,dataList2[0]]},{coord: [1,dataList2[1]]},{coord: [2,dataList2[2]]},{coord: [3,dataList2[3]]}// 标注坐标
],
label: {
show: true, //开启显示
formatter:function (params) {
// dataIndex是当前柱状图的索引
return dataList2[params.dataIndex];
},
},
symbolOffset: [0, '-30%'] // 标注偏移量
}
}
]在 markPoint 图表标注中通过 formatter 显示数值要用 dataList2[params.dataIndex] 来获取.
Documentation - Apache ECharts
顶部显示多行数据:
series: [
{
barWidth: '20%', // 柱子宽度
data: dataList2,
type: 'bar',
itemStyle: { // 显示数值
normal: {
borderRadius: [3, 3, 0, 0], // 圆角
label: {
show: true, //开启显示
position: 'top', //顶部显示
formatter:function (params) {
// dataIndex是当前柱状图的索引
// 这里柱状图的数值是dataList1(国家级数量)+dataList2(我省覆盖)的和除以dataList2(我省覆盖)
let num = (dataList1[params.dataIndex] + dataList2[params.dataIndex])/dataList2[params.dataIndex]
num = Math.round(num*100)/100 // 保留两位小数,不四舍五入
let num1 = dataList2[params.dataIndex]
// num(百分比) num1(数值)
return num1 + '\n' + '(' + num + '%)';// 用 '\n' 换行
},
textStyle: {
color: 'black',
fontSize: 12,
},
},
},
}
}
]柱体圆角:
itemStyle:{
normal: {
borderRadius: [3, 3, 0, 0], // 左上 右上 右下 左下
}
}