vue引用echarts餅圖不顯示圖例的解決
更新時間：2023年02月08日 15:04:36 作者：嘿Dorothy
這篇文章主要介紹了vue引用echarts餅圖不顯示圖例的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
問題描述
按照官網(wǎng)實例編寫代碼后圖例沒有顯示
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配置沒有引入齊全
這是我現(xiàn)在的引入文件
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")
圖例出現(xiàn)了，但字體顏色看不清，再改一下配置
legend: {
data: ['餐飲','娛樂','生活服務','出行住宿','戶外','校園'],
orient: 'vertical',
bottom: 'bottom',//圖例位置
textStyle: { color: "#FFFDFE" },//字體顏色
icon: "circle"http://圖例形狀設置
},
這里我把圖例放在了下面，圖標改成圓形，字體顏色白色，可以正常顯示，圖框背景寬度有些窄了，之后再調(diào)
2.數(shù)據(jù)名稱不匹配
在查這個問題的時候發(fā)現(xiàn)了另外一個可能的問題，這種問題我不存在但還是記錄一下。
即圖例項的名稱，應等于某系列的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最后調(diào)了一下配置
<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軸方向?qū)R方式
},
tooltip : {
trigger: 'item',
formatter: " : {c} (wppm3vysvbp%)",
confine:true//將此限制打開后tooltip將不再溢出
},
legend: {
data: ['餐飲','娛樂','生活服務','出行住宿','戶外','校園'],
orient: 'vertical',
bottom: 'bottom',//圖例位置
// left:left,
textStyle: { color: "#FFFDFE" },//字體顏色
icon: "circle"http://圖例形狀設置
},
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: ' : {c} (wppm3vysvbp%)',
formatter:' : \n{c} (wppm3vysvbp%)',
},
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>
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關系，下面是我對組件之間消息傳遞的常用方式的總結2022-08-08
這篇文章主要介紹了Vue拿到二進制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
如何將iconfont圖標引入到vant的Tabbar標簽欄里邊
這篇文章主要介紹了如何將iconfont圖標引入到vant的Tabbar標簽欄里邊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家?guī)硪黄獪\談Vue.js 1.x 和 2.x 實例的生命周期。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
關于vue中@click.native.prevent的說明
這篇文章主要介紹了關于vue中@click.native.prevent的說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue?如何關掉響應式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE+Express+MongoDB前后端分離實現(xiàn)一個便簽墻
這篇文章主要介紹了VUE+Express+MongoDB前后端分離實現(xiàn)一個便簽墻,需要的朋友可以參考下2021-04-04
<el-button>點擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點擊后如何跳轉(zhuǎn)指定url鏈接問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在Vue中我們可以使用ref屬性來獲取子組件的實例對象,這個功能非常方便,這篇文章主要給大家介紹了關于Vue獲取子組件實例對象ref屬性的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06