vue引用echarts餅圖不顯示圖例的解決

更新時(shí)間：2023年02月08日 15:04:36 作者：嘿Dorothy

這篇文章主要介紹了vue引用echarts餅圖不顯示圖例的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

問(wèn)題描述

按照官網(wǎng)實(shí)例編寫(xiě)代碼后圖例沒(méi)有顯示

legend: {
            data: ['餐飲','娛樂(lè)','生活服務(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:'娛樂(lè)',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 }},
              ],
            }
          ],

如圖所示并沒(méi)有圖例

解決方法

1.echarts配置沒(méi)有引入齊全

這是我現(xiàn)在的引入文件

let echarts = require('echarts/lib/echarts');
  // 引入餅狀圖組件
  require('echarts/lib/chart/pie');
  // 引入提示框和title組件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

沒(méi)有引入圖例相關(guān)組件，于是將其引入

require("echarts/lib/component/legend")

圖例出現(xiàn)了，但字體顏色看不清，再改一下配置

legend: {
            data: ['餐飲','娛樂(lè)','生活服務(wù)','出行住宿','戶外','校園'],
            orient: 'vertical',
            bottom: 'bottom',//圖例位置
            textStyle: { color: "#FFFDFE" },//字體顏色
            icon: "circle"http://圖例形狀設(shè)置
         },

這里我把圖例放在了下面，圖標(biāo)改成圓形，字體顏色白色，可以正常顯示，圖框背景寬度有些窄了，之后再調(diào)

2.數(shù)據(jù)名稱(chēng)不匹配

在查這個(gè)問(wèn)題的時(shí)候發(fā)現(xiàn)了另外一個(gè)可能的問(wèn)題，這種問(wèn)題我不存在但還是記錄一下。

即圖例項(xiàng)的名稱(chēng)，應(yīng)等于某系列的name值，在這段代碼里應(yīng)該是

legend: {
            data: ['餐飲','娛樂(lè)','生活服務(wù)','出行住宿','戶外','校園'],
          },

series : [
            {
              data:[
                {value:cy, name:'餐飲'},
                {value:yl, name:'娛樂(lè)'},
                {value:shfw, name:'生活服務(wù)'},
                {value:cxzs, name:'出行住宿'},
                {value:hw, name:'戶外'},
                {value:xy, name:'校園'},
              ],
            }
          ],

legend中的data應(yīng)該與data中的name相匹配

我將data中最后一項(xiàng)“校園”改為“111”之后

series : [
            {
              data:[
                {value:cy, name:'餐飲'},
                {value:yl, name:'娛樂(lè)'},
                {value:shfw, name:'生活服務(wù)'},
                {value:cxzs, name:'出行住宿'},
                {value:hw, name:'戶外'},
                {value:xy, name:'111'},
              ],
            }
          ],

圖例的最后一項(xiàng)“校園”不顯示了嗯…這確實(shí)可能是個(gè)存在的問(wèn)題

（突然想到我的toolbox也顯示不出來(lái)是不是也是因?yàn)闆](méi)有引入配置的原因，于是）

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,'娛樂(lè):',yl,'生活服務(wù):',shfw,'出行住宿:',cxzs,'戶外:',hw,'校園:',xy);
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('Echarts'));
        // 繪制圖表
        myChart.setOption({
          title : {
            x:'center',//x軸方向?qū)R方式
          },
          tooltip : {
            trigger: 'item',
            formatter: " : {c} (vvxyksv9kd%)",
            confine:true//將此限制打開(kāi)后tooltip將不再溢出
          },
          legend: {
            data: ['餐飲','娛樂(lè)','生活服務(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:'娛樂(lè)',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>