echarts饼图位置调整（vue echarts饼图环形 （随着legend动态显示数据总数））
导读：目录...
目录
1.安装echarts
2.引入echarts
3.创建要放入echarts实例的一个盒子
4.创建echarts实例
5.随着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>有不足的地方还望各位大佬指点一二
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！