vue引用echarts餅圖不顯示圖例的解決
問題描述
按照官網(wǎng)實例編寫代碼后圖例沒有顯示
legend: { data: ['餐飲','娛樂','生活服務(wù)','出行住宿','戶外','校園'], 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:'生活服務(wù)',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');
沒有引入圖例相關(guān)組件,于是將其引入
require("echarts/lib/component/legend")
圖例出現(xiàn)了,但字體顏色看不清,再改一下配置
legend: { data: ['餐飲','娛樂','生活服務(wù)','出行住宿','戶外','校園'], orient: 'vertical', bottom: 'bottom',//圖例位置 textStyle: { color: "#FFFDFE" },//字體顏色 icon: "circle"http://圖例形狀設(shè)置 },
這里我把圖例放在了下面,圖標改成圓形,字體顏色白色,可以正常顯示,圖框背景寬度有些窄了,之后再調(diào)
2.數(shù)據(jù)名稱不匹配
在查這個問題的時候發(fā)現(xiàn)了另外一個可能的問題,這種問題我不存在但還是記錄一下。
即圖例項的名稱,應等于某系列的name值,在這段代碼里應該是
legend: { data: ['餐飲','娛樂','生活服務(wù)','出行住宿','戶外','校園'], },
series : [ { data:[ {value:cy, name:'餐飲'}, {value:yl, name:'娛樂'}, {value:shfw, name:'生活服務(wù)'}, {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:'生活服務(wù)'}, {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,'生活服務(wù):',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} (vvxyksv9kd%)", confine:true//將此限制打開后tooltip將不再溢出 }, legend: { data: ['餐飲','娛樂','生活服務(wù)','出行住宿','戶外','校園'], orient: 'vertical', bottom: 'bottom',//圖例位置 // left:left, textStyle: { color: "#FFFDFE" },//字體顏色 icon: "circle"http://圖例形狀設(shè)置 }, 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:'生活服務(wù)',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',//設(shè)置顏色 } }, }); }, </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>
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Ant?Design-vue?解決input前后空格問題(推薦)
最近做項目遇到這樣一個問題輸入框不允許有前后空格但字符中間可以有空格,怎么解決這個問題呢,接下來小編把ant?Design-vue?解決input前后空格問題的實現(xiàn)代碼分享給大家,感興趣的朋友一起看看吧2022-10-10vue文件上傳Required request part ‘file‘ is&n
這篇文章主要介紹了vue文件上傳Required request part ‘file‘ is not present問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue 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