vue引用echarts饼图不显示图例的解决
更新时间：2023年02月08日 15:04:36 作者：嘿Dorothy
这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
问题描述
按照官网实例编写代码后图例没有显示
legend: {
data: ['餐饮','娱乐','生活服务','出行住宿','户外','校园'],
orient: 'vertical',
left: 'left',
},
series : [
{
type: 'pie',
radius : '50%',
center: ['50%', '50%'],
data:[
{value:cy, name:'餐饮',itemStyle:{color:"#0e932e"},label: { show: true },labelLine: { show: true }},
{value:yl, name:'娱乐',itemStyle:{color:"#e16531"},label: { show: true },labelLine: { show: true }},
{value:shfw, name:'生活服务',itemStyle:{color:"#db639b"},label: { show: true },labelLine: { show: true }},
{value:cxzs, name:'出行住宿',itemStyle:{color:"#594d9c"},label: { show: true },labelLine: { show: true }},
{value:hw, name:'户外',itemStyle:{color:"#d81e06"},label: { show: true },labelLine: { show: true }},
{value:xy, name:'校园',itemStyle:{color:"#84E4CE"},label: { show: true },labelLine: { show: true }},
],
}
],
如图所示并没有图例
解决方法
1.echarts配置没有引入齐全
这是我现在的引入文件
let echarts = require('echarts/lib/echarts');
// 引入饼状图组件
require('echarts/lib/chart/pie');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
没有引入图例相关组件，于是将其引入
require("echarts/lib/component/legend")
图例出现了，但字体颜色看不清，再改一下配置
legend: {
data: ['餐饮','娱乐','生活服务','出行住宿','户外','校园'],
orient: 'vertical',
bottom: 'bottom',//图例位置
textStyle: { color: "#FFFDFE" },//字体颜色
icon: "circle"//图例形状设置
},
这里我把图例放在了下面，图标改成圆形，字体颜色白色，可以正常显示，图框背景宽度有些窄了，之后再调
2.数据名称不匹配
在查这个问题的时候发现了另外一个可能的问题，这种问题我不存在但还是记录一下。
即图例项的名称，应等于某系列的name值，在这段代码里应该是
legend: {
data: ['餐饮','娱乐','生活服务','出行住宿','户外','校园'],
},
series : [
{
data:[
{value:cy, name:'餐饮'},
{value:yl, name:'娱乐'},
{value:shfw, name:'生活服务'},
{value:cxzs, name:'出行住宿'},
{value:hw, name:'户外'},
{value:xy, name:'校园'},
],
}
],
legend中的data应该与data中的name相匹配
我将data中最后一项“校园”改为“111”之后
series : [
{
data:[
{value:cy, name:'餐饮'},
{value:yl, name:'娱乐'},
{value:shfw, name:'生活服务'},
{value:cxzs, name:'出行住宿'},
{value:hw, name:'户外'},
{value:xy, name:'111'},
],
}
],
图例的最后一项“校园”不显示了 嗯…这确实可能是个存在的问题
（突然想到我的toolbox也显示不出来是不是也是因为没有引入配置的原因，于是）
require("echarts/lib/component/toolbox");
有被自己聪明到
附全部代码
toolbox最后调了一下配置
<template>
<div class="Echarts" id="Echarts"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
// 引入饼状图组件
require('echarts/lib/chart/pie');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/component/legend");
require("echarts/lib/component/toolbox");
myEcharts(){
console.log('餐饮:',cy,'娱乐:',yl,'生活服务:',shfw,'出行住宿:',cxzs,'户外:',hw,'校园:',xy);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('Echarts'));
// 绘制图表
myChart.setOption({
title : {
x:'center',//x轴方向对齐方式
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)",
confine:true//将此限制打开后tooltip将不再溢出
},
legend: {
data: ['餐饮','娱乐','生活服务','出行住宿','户外','校园'],
orient: 'vertical',
bottom: 'bottom',//图例位置
// left:left,
textStyle: { color: "#FFFDFE" },//字体颜色
icon: "circle"//图例形状设置
},
calculable : true,
series : [
{
type: 'pie',
radius : '50%',
center: ['50%', '50%'],
data:[
{value:cy, name:'餐饮',itemStyle:{color:"#0e932e"},label: { show: true },labelLine: { show: true }},
{value:yl, name:'娱乐',itemStyle:{color:"#e16531"},label: { show: true },labelLine: { show: true }},
{value:shfw, name:'生活服务',itemStyle:{color:"#db639b"},label: { show: true },labelLine: { show: true }},
{value:cxzs, name:'出行住宿',itemStyle:{color:"#594d9c"},label: { show: true },labelLine: { show: true }},
{value:hw, name:'户外',itemStyle:{color:"#d81e06"},label: { show: true },labelLine: { show: true }},
{value:xy, name:'校园',itemStyle:{color:"#84E4CE"},label: { show: true },labelLine: { show: true }},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "black"
},
normal:{
label:{
textStyle: {color:'white',},
show: true,
// formatter: '{b} : {c} ({d}%)',
formatter:'{b} : \n{c} ({d}%)',
},
labelLine :{show:true},
},
},
label:{normal:{show:true,}}
}
],
toolbox: {
left: '15',//距左
// top: '2',//距上
show:true,
feature: {
dataView: {
readOnly: false,
emphasis: {
iconStyle: {
textFill:'#ffffff',
}
}
},
saveAsImage: {
show:true,
backgroundColor:"#004981",
emphasis: {
iconStyle: {
textFill:'#ffffff',
}
}
},//保存为图片
},
iconStyle:{
color:'white',//设置颜色
}
},
});
},
</script>
<style>
.Echarts{
position:absolute;
bottom: -220px;
left: 10px;
width:400px;
height: 220px;
background:url("../assets/images/echarts-box.png") no-repeat;
z-index: 99;
}
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了webpack开发vue-cli的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
实现shallowReadonly和isProxy功能示例详解
这篇文章主要为大家介绍了实现shallowReadonly和isProxy功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
高亮显示是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于如何使用Vue3实现文章内容中多个"关键词"标记高亮显示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
vue在 for 循环里使用异步调用 async/await的方法
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍vue 如何在 for 循环里面使用异步调用 async/await,感兴趣的朋友一起看看吧2023-10-10
关于Element-UI Table 表格指定列添加点击事件
这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文通过实例代码给大家介绍了vue 下列表侧滑操作,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了vue3使用el-upload上传文件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue项目使用高德地图时报错:AMap is not defined解决办法
这篇文章主要给大家介绍了关于vue项目使用高德地图时报错:AMap is not defined的解决办法,"AMap is not defined"是一个错误提示,意思是在代码中没有找到定义的AMap,需要的朋友可以参考下2023-12-12
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
这篇文章主要介绍了详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论