vue echarts饼图环形 （随着legend动态显示数据总数）
Posted 热乎劲的小仓库
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue echarts饼图环形 （随着legend动态显示数据总数）相关的知识，希望对你有一定的参考价值。
目录
效果视频
1.安装echarts
npm install echarts --save2.引入echarts
在 当前vue文件中引入 echarts
如下图所示：
3.创建要放入echarts实例的一个盒子
切记：必须给echarts实例盒子宽高
如下图所示：
4.创建echarts实例
这里就此案例对echarts环形图进行了简单的设置和讲解
<template>
<div id="main">
</div>
</template>
<script>
import * as echarts from 'echarts'
export default
data()
return
echartsSumnum: 0,//数据总数
option:
// 设置标题
title:
text: '',//主标题 (主标题里面来动态显示当前数据总数)
subtext: '总数',//副标题
x: 'center',//标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemGap: -5,//主标题和副标题之间的距离(默认为 0)
textStyle: //设置主标题样式
fontSize: 40,
color: '#666',
backroung: 'blue'
,
subtextStyle: //设置副标题样式
fontSize: 20,
color: "#666"
,
// 鼠标滑过显示悬浮框
tooltip:
// show:true,//鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
//设置悬浮框内展示的内容
// a:series.name b:series.data.name c:series.data.value d:当前数据所占数据的百分比
formatter: 'a</br>b: c </br>所占比例: d%',
,
// 设置图例
legend:
orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//图例y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemStyle: ,//设置图例前面的图标样式
textStyle: //设置图例文字样式
fontSize: 14
,
// 设置主体
series: [
name: 'hello world', //echarts图名字
type: 'pie',//echarts 类型
minAngle: 5,//echarts数据value为0时默认为value为5
radius: ['30%', '40%'],//设置环形图 （ radius: ['设置内圆大小', '设置外圆大小'] 不折设置默认为实心圆饼图）
center: ['50%', '50%'],//设置饼图位置 （center:['x轴位置','y轴位置']不设置默认在中间）
data: [ //echarts数据
value: 80, name: 'ONE' ,
value: 50, name: 'TWO' ,
value: 120, name: 'THREE' ,
value: 210, name: 'FOUR' ,
value: 0, name: 'FIVE'
],
,
]
,
mounted()
// 初始化数据的总数
this.option.series[0].data.forEach(v =>
this.echartsSumnum += v.value
)
this.option.title.text = this.echartsSumnum
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.setOption(this.option);
</script>
<style scoped lang="less">
#main
width: 800px;
height: 500px;
</style>5.随着legend动态显示数据总数
下面所示代码为全部代码
<template>
<div id="main">
</div>
</template>
<script>
import * as echarts from 'echarts'
export default
data()
return
echartsSumnum: 0,//数据总数
option:
// 设置标题
title:
text: '',//主标题 (主标题里面来动态显示当前数据总数)
subtext: '总数',//副标题
x: 'center',//标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemGap: -5,//主标题和副标题之间的距离(默认为 0)
textStyle: //设置主标题样式
fontSize: 40,
color: '#666',
backroung: 'blue'
,
subtextStyle: //设置副标题样式
fontSize: 20,
color: "#666"
,
// 鼠标滑过显示悬浮框
tooltip:
// show:true,//鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
//设置悬浮框内展示的内容
// a:series.name b:series.data.name c:series.data.value d:当前数据所占数据的百分比
formatter: 'a</br>b: c </br>所占比例: d%',
,
// 设置图例
legend:
orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//图例y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemStyle: ,//设置图例前面的图标样式
textStyle: //设置图例文字样式
fontSize: 14
,
// 设置主体
series: [
name: 'hello world', //echarts图名字
type: 'pie',//echarts 类型
minAngle: 5,//echarts数据value为0时默认为value为5
radius: ['30%', '40%'],//设置环形图 （ radius: ['设置内圆大小', '设置外圆大小'] 不折设置默认为实心圆饼图）
center: ['50%', '50%'],//设置饼图位置 （center:['x轴位置','y轴位置']不设置默认在中间）
data: [ //echarts数据
value: 80, name: 'ONE' ,
value: 50, name: 'TWO' ,
value: 120, name: 'THREE' ,
value: 210, name: 'FOUR' ,
value: 0, name: 'FIVE'
],
,
]
,
mounted()
// 初始化数据的总数
this.option.series[0].data.forEach(v =>
this.echartsSumnum += v.value
)
this.option.title.text = this.echartsSumnum
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
let echartsArr = []; //点击图例后所剩的数据名
let echartsNum = 0;//点击图例后所剩的数据的总和
// 利用echarts自带的legendselectchanged方法获取点击后的数据(但是这里只能获取到名字)
myChart.on('legendselectchanged', (params) =>
echartsArr = [];//将点击后的数组设为空（每点击一次就重新判断添加）
// 循环点击图例后获取到的名字
for (let key in params.selected)
// 判断值是否为true 将值为true的名字push到echartsArr数组当中保留起来
if (params.selected[key])
echartsArr.push(key)
echartsNum = 0; //将总数的值设为0（每点击一次就重新计算）
// 循环判断数据的全部数据里的name值是否与我们点击图例后所剩数据的数组相等
// 相等的话就将其value值进行相加得出点击图例后所剩数据的总数
this.option.series[0].data.forEach(item =>
echartsArr.forEach(v =>
if (item.name === v)
echartsNum += item.value
)
)
this.option.title.text = echartsNum //最后将其赋值给主标题即可
this.$nextTick(() =>
myChart.setOption(this.option);
)
)
myChart.setOption(this.option);
</script>
<style scoped lang="less">
#main
width: 800px;
height: 500px;
</style>有不足的地方还望各位大佬指点一二
echarts白色实心环形图（空心饼图）的编写
// 数据接入机构统计
let myDom = document.getElementById(‘myChart‘);
let myWidth = myDom.offsetWidth - 5; // 获取容器宽度
let myHeight = myDom.offsetHeight - 5; // 获取容器高度
let myRadius = myHeight * 0.44 / 2; // 根据环形图内圈百分比获取内圆半径
let myPX = (0.3 - (myRadius / myWidth)) * 100 + ‘%‘; // 获取白色填充圆在容器中的x轴位置百分比，以便与环形图贴合
let myChart = echarts.init(document.getElementById(‘myChart‘));
let option = {
title: { // 标题样式
text: ‘数据接入机构统计‘,
textStyle: {
color: ‘#cccccc‘,
fontSize: 14
}
},
tooltip: { // 悬浮提示
trigger: ‘item‘,
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: ‘vertical‘,
top: ‘20%‘,
right: 20, // 与容器距离调节
icon: ‘circle‘, // 样式调节‘circle‘,‘rect‘,‘roundRect‘,‘triangle‘,‘diamond‘,‘pin‘,‘arrow‘,‘none‘等
itemWidth: 7,
textStyle: {
color: ‘#ffffff‘,
fontSize: 10,
padding: [0, 0, 0, 5] //字与图形间的边距
},
data:[‘111‘,‘222‘,‘333‘]
},
graphic: {
elements: [
{
type: ‘group‘,
left: myPX, // 横坐标位置
top: ‘33%‘, // 纵坐标位置 55% - （44% / 2）
children: [
{
type: ‘circle‘,
shape: {
r: myRadius // 白色圆半径
},
style: {
fill: ‘#fff‘ // 背景颜色
}
},
{
type: ‘text‘, // 覆盖在圆上的文字位置和样式
style: {
text: 12345,
y: -10,
textAlign: ‘center‘,
fontSize: 12,
fill: ‘#494949‘
}
},
{
type: ‘text‘,
style: {
text: ‘条‘,
y: 10,
textAlign: ‘center‘,
fontSize: 13,
fill: ‘#494949‘
}
}
]
}
]
},
series: [
{
name:‘机构统计‘,
type:‘pie‘,
radius: [‘44%‘, ‘70%‘], // 环形图大小和粗细
avoidLabelOverlap: false,
center: [‘30%‘, ‘55%‘], // 环形图位置
label: {
normal: {
show: false, // 设置不显示
position: ‘center‘ // hover时提示在圆环内
}
},
data:[
{value:335, name:‘111‘},
{value:310, name:‘222‘},
{value:234, name:‘333‘}
]
}
]
};
myChart.setOption(option);
以上是关于vue echarts饼图环形 （随着legend动态显示数据总数）的主要内容，如果未能解决你的问题，请参考以下文章