普通饼图
只是记录一下做项目时遇到的部分设置,真想搞明白,还是看文档
有些旧版的浏览器可能不支持ECharts的rem单位,可以改为px,否则不同屏幕可能会出现图表文字重叠的问题
// 图形的div,需要设置样式给他一个宽高
<div class="table" ref="myChartsCapital"></div>
// 初始化饼图,主要是配置setOption里的值
let myChart = this.$echarts.init(this.$refs.myChartsCapital)
myChart.setOption({
// 图表的主副标题的位置及文字样式设置
title: {
show: true,
text: '饼图主标题',
subtext: '饼图副标题',
itemGap: 6, // 主副标题的间距
left: 'center',
textStyle: { // 主标题文本样式
color: "#fff",
fontStyle: "normal",
fontWeight: "normal",
fontFamily: "sans-serif",
fontSize: 18,
lineHeight: "30",
},
subtextStyle: {} // 副标题文本样式
},
graphic: [ //为环形图中间添加文字,title也能实现
{
type: "text",
left: "center",
top: "center",
style: {
text: "添加文本,还没看能不能设置不同的样式",
textAlign: "center",
fill: "#32373C",
fontSize: 18,
},
},
],
// 提示框组件
tooltip: {
show:true,
// 触发类型,item在无坐标轴的图表中使用,axis在有坐标轴的图表中使用
trigger: 'item',
triggerOn:"mousemove", // 触发条件,mousemove或click等
textStyle: {},
// 自定义提示框内容,默认是series里的name和data数据(必须有个name)
formatter: (value) => {
return value.name + ''
}
},
// 图例,这个有点麻烦
legend: {
orient: 'vertical', //图例方向,horizontal(默认横向)、vertical(垂直)
data: data,
icon: 'circle', // 图例形状,默认为方形,none为空,具体看文档
itemGap: 10, // 图例之间的间隔
itemWidth: 10, // 图例的长宽
itemHeight: 10,
left: 'center',
padding: [5, 5, 5, 5],
// 自定义图例文本内容,并换行
formatter: (name) => {
let data = this.data;
let value;
let per
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
value = data[i].value;
per = data[i].per
}
}
let arr = [
'{a|' + name + '}',
'{b|' + value + '件}' + '{c|' + per + '%}' + '{d|' + ' ' + '}'
]
return arr.join('\n')
},
// 自定义图例富文本样式
textStyle: {
rich: {
a: {
fontFamily: 'PingFang SC',
fontSize: '0.1rem',
fontWeight: 'Bold',
color: '#333',
align: 'left',
padding: [28, 0, 0, 0],
},
b: {
width: 200 // 文本宽度,使文本换行后能够对齐
},
c: {}
}
},
},
// 渲染数据
series: [
{
name: '环形图', // 用于tooltip的显示,legend图例筛选
type: 'pie',
// radius: '50%', // 饼图
radius: ['40%', '70%'], // 环形图
// roseType: 'radius', // 南丁格尔玫瑰图
center: ['50%', '50%'], // 圆心位置
selectedMode: 'single', // 点击后跟饼图分离,挺有意思的
avoidLabelOverlap: false, // 是否启用防止标签重叠策略,默认开启
data: this.data,
itemStyle: {
borderRadius: 10, // 实现圆角环形图
borderColor: '#fff',
borderWidth: 2
},
// 图像的文本标签
label: {
show: false,
position: 'center' // outside(外侧)、inside(同inner,内部)
},
// 是否显示引导线,引导线设置平滑
labelLine: {
show: true,
smooth: 0.9,
length: 10,
length2: 30
},
emphasis: {
// 环形图高亮部分文本,默认显示
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
},
// 写两个环形图,设置不同半径,可以实现同心圆效果
{...}
],
// 设置渐变色,这里只写了一个
color:
[
new echarts.graphic.LinearGradient(1, 1, 0, 0,
[
{ offset: 0, color: '#BE9DF6' },
{ offset: 0.9, color: '#60BFFF' }
]
)
]
})
// 图表初始化之后,加个监听实现图表自适应
window.addEventListener("resize", function () {
myChart.resize();
});