ecahrts可以双图表，写在series中。
在线地址https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-real-estate
image.png
const data = [
[5000, 10000, 6785.71],
[4000, 10000, 6825],
[3000, 6500, 4463.33],
[2500, 5600, 3793.83],
[2000, 4000, 3060],
[2000, 4000, 3222.33],
[2500, 4000, 3133.33],
[1800, 4000, 3100],
[2000, 3500, 2750],
[2000, 3000, 2500],
[1800, 3000, 2433.33],
[2000, 2700, 2375],
[1500, 2800, 2150],
[1500, 2300, 2100],
[1600, 3500, 2057.14],
[1500, 2600, 2037.5],
[1500, 2417.54, 1905.85],
[1500, 2000, 1775],
[1500, 1800, 1650]
];
// prettier-ignore
const cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
const barHeight = 50;
option = {
color: ["#066AFE", "#0579FC", "#0591FC", "#059DF5", "#02A9E6", "#06B6DA", "#1DD7DD", "#1ADDCC", "#35E1B8", "#1EDD9D"],
tooltip: {
trigger: 'item',
formatter: "{b} <br/>{c}万元"
},
tooltip: {
trigger: 'item',
formatter: "{b} <br/>{c}万元"
},
grid: {
top: 100
},
angleAxis: {
type: 'category',
data: cities
},
radiusAxis: {},
polar: {},
series: [
{
type: 'bar',
itemStyle: {
color: 'transparent'
},
data: data.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: 'Min Max',
silent: true
},
{
type: 'pie',
//startAngle: 0,
//clockwise: false,
radius: ["10%", "90%"],
center: ['50%', '50%'],
roseType: 'area',
avoidLabelOverlap: false,
label: {
show: true,
position: 'inside',
formatter: '{b}',
// interval: 0,
textStyle: {
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
color: '#FAFAFA',
fontSize: 8,
},
},
labelLine: {
show: true,
length: 0,
length2: 2,
},
data: [
{ value: 25, name: '生物工程学院' },
{ value: 50, name: '生物工程学院2' },
{ value: 75, name: '生物工程学院3' },
{ value: 100, name: '生物工程学院4' },
{ value: 40, name: '生物工程学院5' },
{ value: 30, name: "生物工程学院6" },
{ value: 20, name: "生物工程学院7" },
{ value: 55, name: "生物工程学院8" },
{ value: 85, name: "生物工程学院9" },
{ value: 75, name: "生物工程学院10" },
].sort(function (a, b) { return b.value - a.value; }),
}
]
};
环形图基于饼图，也有基于极点图等。
image.png
let data=[
{name:'达标率',value:75.9,color:'#066AFE'},
{name:'优秀率',value:75.9,color:'#02DA77'},
{name:'良好率',value:75.9,color:'#FF7731'},
{name:'达标率',value:75.9,color:'#066AFE'},
{name:'优秀率',value:75.9,color:'#02DA77'},
{name:'良好率',value:75.9,color:'#FF7731'},
]
let i=0
// 以上为假数据
option = {
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '38%',
style: {
//value当前进度
text: data[i].name,
textAlign: 'center',
fill: '#7E97CC',
fontSize: 12
}
},
//第二行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '55%',
style: {
//maxValue进度条最大值
text: data[i].value+'%',
textAlign: 'center',
fill: '#fff',
fontSize: 12
}
}
],
series: [{
clockwise: false, // 逆时针
type: 'pie',
radius: ['70%', '64%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine: {
normal: {
show: false
}
},
//增加阴影效果
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
}
},
data: [
//value当前进度 + 颜色
{
value: data[i].value,
itemStyle: {
normal: {
color: data[i].color
}
}
},
//(maxValue进度条最大值 - value当前进度) + 颜色
{
value: 100 - data[i].value,
itemStyle: {
normal: {
color: '#73A0FA'
}
}
}
]
}]
};
网友评论