apex图表使用饼图居中_vue中使用Echarts饼图(环状图)

流程

created () {

this.initEchart()

},

methods: {

initEchart () {

axios.get('/echart').then((res) => {

let echartData = res.data;

this.$nextTick(() => {

let pieEchart = document.getElementById('pieChart');

let pieEcharts = Echarts.init(pieEchart);

let option = { }

pieEcharts.setOption(option)

// 如果需要点击圆环触发事件

pieEcharts.on('click', function(param) {

let typeName = param.name

switch (typeName) {

case '男':

location.href = `gender?sex=1`

break

case '女':

location.href = `gender?sex=2`

break

});

})

}).catch((error) => {

console.log(error);

})

}

},

循环

data() {

return {

pieArr: []

}

},

created () {

this.initEchart()

},

methods: {

initEchart () {

axios.get('/echart').then((res) => {

this.pieArr = res.data;

this.$nextTick(() => {

for (let i = 0, len = this.pieArr.length; i < len; i++) {

let pieEchart = document.getElementById('pieChart'+i);

let pieEcharts = Echarts.init(pieEchart);

let option = { }

pieEcharts.setOption(option)

}

})

}).catch((error) => {

console.log(error);

})

}

},

配置

以下配置以循环数据为例

一、标题 (title)

官方链接

标题如果无特殊要求，可按以下配置。

我的需求是副标题其中有个不定长的显示值和其他部分颜色不同，要突出显示，所以我在echarts外面使用标签加好样式后，定位在了相应位置。

title: {

// 默认为true，false隐藏

show:true,

// 主标题名称，'\n'指定换行

text: res.data[i].name,

// 主标题跳转链接，书写路由path路径，后面拼接参数

link: `page?id=${res.data[i].id}`,

// 本窗口打开,可设置为'self'，'blank'新窗口打开

target: "self",

// 主标题样式

textStyle: {

fontSize: 14,

fontWeight: 'bold'

},

// 副标题

subtext: '',

// 副标题跳转链接

sublink: '',

// 副标题打开方式

subtarget: null,

// 副标题样式

subtextStyle: {

fontSize: 12

},

// 对齐方式，可设置为'left','center','right'

textAlign: null,

// 水平位置，默认'left',可设置为'left','center','right',number(px)

x:'left',

// 垂直位置，默认'top',可设置为'top','center','bottom',number(px)

y: 'top',

// 标题内边距，单位px

padding: 5,

// 主副标题纵向间隔，单位px

itemGap: 10,

},

二、悬浮提示框 (tooltip)

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

三、图例 (legend)

legend: {

// 取消图例上的点击事件，这个看需求

selectedMode: false,

// 分布方式，水平：'horizontal'，垂直：'vertical'

orient: 'vertical',

// 水平对齐方式，可设置为'left','center','right',number(px)

x: 'left',

// 垂直对齐方式，可设置为'top','center','bottom',number(px)

y: 'top',

// 距顶部的距离，其他同理

top: '60%',

// 距左边的距离，其他同理

left: '60%',

// 图标大小,宽和高

itemWidth: 12,

itemHeight: 12,

// 显示内容

data: ['男' ,'女'],

// 如需自定义添加内容，可在series的data定义相应的数据，最后返回处理后的内容

formatter: (name) => {

let res = "";

for(var i = 0; i < option.series[0].data.length; i++) {

if (option.series[0].data[i].name == name) {

res = option.series[0].data[i].value;

}

}

return name + ' ' + res;

}

},

如果想要分别在不同的位置来显示

legend: [

{

orient: 'vertical',

x: 'left',

top: '40%',

left: '60%',

data: ['男'],

formatter: function(name){

let res = "";

for(var i = 0; i < option.series[0].data.length; i++) {

if (option.series[0].data[i].name == name) {

res = option.series[0].data[i].value;

}

}

return name + ' ' + res;

}

},

{

orient: 'vertical',

x: 'left',

top: '60%',

left: '60%',

data: ['女'],

formatter: function(name){

let res = "";

for(var i = 0; i < option.series[0].data.length; i++) {

if (option.series[0].data[i].name == name) {

res = option.series[0].data[i].value;

}

}

return name + ' ' + res;

}

},

],

四、自定义显示文字 (graphic)

官方链接

可在任意位置放任意多个

graphic:[

{

type:'text',

left:'50%',

top:'40%',

style:{

text: res.data[i].name,

textAlign:'center',

fill:'#333',

font: '20px Microsoft YaHei',

width:30,

height:30

},

cursor: 'default'

},

{

type:'text',

left:'50%',

top:'60%',

style:{

text: res.data[i].age,

textAlign:'center',

fill:'#333',

font: '20px Microsoft YaHei',

width:30,

height:30

},

cursor: 'default'

},

],

五、保存图片 (toolbox)

// 全部使用默认即可

toolbox: {

feature: {

saveAsImage: {}

}

},

六、图表 (series)

series: [

{

name: '',

// 图标类型，饼图

type: 'pie',

// 环形大小

radius: ['45%', '50%'],

// 圆环位置

center: ['30%', '60%'],

// 防止标签重叠

avoidLabelOverlap: true,

itemStyle : {

normal : {

//隐藏标示文字

label : {

show : false

},

//隐藏标示线

labelLine : {

show : false

}

}

},

// 数据

data: [

{

value: res.data[i].male,

name: '男',

},

{

value: res.data[i].female,

name: '女',

},

],

// 图表显示颜色

color: ['#4B96E8','#FAB737'],

}

]

问题

如果图表位置不是居中的，某些自定义的文字相对于圆环的位置也会偏移，动态计算显示某些文字的位置

let size;

if(!size)document.body.offsetWidth > 1500 ? size = 0.23 : size = 0.21

if(!this.boxWidth) this.boxWidth = pieEchart.offsetWidth * size;

案例

文字居中与图例居中

let option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

// 取消图例上的点击事件，这个看需求

selectedMode: false,

// 分布方式，水平：'horizontal'，垂直：'vertical'

orient: 'horizontal',

// 水平对齐方式，可设置为'left','center','right',number(px)

x: 'center',

// 垂直对齐方式，可设置为'top','center','bottom',number(px)

y: 'top',

// 距顶部的距离，其他同理

top: '70%',

// 距左边的距离，其他同理

// left: '10%',

// 图标大小,宽和高

itemWidth: 12,

itemHeight: 12,

// 显示内容

data: markArr.map((item) => { return item.name }),

},

series: [

{

name:'',

type:'pie',

radius: ['45%', '50%'],

center: ['50%', '30%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '12',

// fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: false

}

},

data: markArr,

// color: ['#4B96E8','#FAB737','#EA4545', '#DDDDDD'],

}

]

}

网站导航