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://圖例形狀設置
},
這里我把圖例放在了下面，圖標改成圓形，字體顏色白色，可以正常顯示，圖框背景寬度有些窄了，之后再調
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最后調了一下配置
<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: " : {c} (vvxyksv9kd%)",
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} (vvxyksv9kd%)',
formatter:' : \n{c} (vvxyksv9kd%)',
},
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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Ant?Design-vue?解決input前后空格問題(推薦)
最近做項目遇到這樣一個問題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個問題呢，接下來小編把ant?Design-vue?解決input前后空格問題的實現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2022-10-10
這篇文章主要為大家詳細介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
媒體查詢@media常見的不生效原因包括格式書寫錯誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會覆蓋前面的；CSS本身存在問題,比如塊元素浮動導致父級元素無高度而背景顏色不顯示；漏掉了meta屬性中的viewport屬性,正確書寫和排列CSS代碼2024-10-10
這篇文章主要給大家介紹了關于vue3如何監(jiān)聽頁面的滾動的相關資料,在vue中實現(xiàn)滾動監(jiān)聽和原生js無太大差異,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-07-07
有時候給頁面內容添加一個關鍵詞搜索功能,如果搜索結果能夠像瀏覽器搜索一樣高亮顯示,那找起來就會很明顯體驗會好很多,本文就來介紹一下vue搜索高亮popsearch組件的實現(xiàn)示例,感興趣的可以了解一下2023-09-09
這篇文章主要為大家詳細介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
vue文件上傳Required request part ‘file‘ is&n
這篇文章主要介紹了vue文件上傳Required request part ‘file‘ is not present問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue element-ui v-for循環(huán)el-upload上傳圖片 動態(tài)添加、刪除方式
這篇文章主要介紹了vue element-ui v-for循環(huán)el-upload上傳圖片 動態(tài)添加、刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
基于Vue+elementUI實現(xiàn)動態(tài)表單的校驗功能(根據(jù)條件動態(tài)切換校驗格式)
這篇文章主要介紹了Vue+elementUI的動態(tài)表單的校驗(根據(jù)條件動態(tài)切換校驗格式),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04