【小程序开发填坑记】之 实现echarts绘制柱状图有多个legend时，变量只显示某一柱子

创作背景

• 本菜鸡有这样一个需求，首先是 要使用 echarts 绘制一个柱状图，其次是 根据数据所对应的分类不同，每个变量只显示一个柱子。
• 说起来挺抽象，我就用具体的数据来说明一下吧：

  • 有一个 二维数组，数据如下图所示
    

    • 我想根据菜品对应的喜爱人数绘制柱状图，而柱子的颜色根据菜品所属餐厅的不同而变化。

解决思路

• 首先，图表的 legend 属性中的 data 要设置为 三个食堂构成的名称列表
• 其次，我们要分别获得 食堂对应菜品的喜爱人数 ，不属于本食堂的菜品数量应设置为 '-'(代表数据缺失)
• 最后，根据这些数据 生成 对应的柱状图

初次尝试

• 说干就干！
• 按照我的思路，我完成了这些设置，代码如下（仅有获得食堂与颜色对应关系的函数 get_map 和获得 series 的函数 get_series 还有 option，其他的设置省略）：
• get_map

function get_map() {
   
   
    let colorList = ['blue', 'orange', 'red', 'deeppink', 'yellow'];
    let legend = ['三食堂', '一食堂', '二食堂'];
    let map = {
   
   };
    for(let i = 0; i<legend.length; i++){
   
   
        let k = legend[i];
        // 判断食堂名称是否在映射字典的键中，如果没有，就添加 食堂名称与柱子颜色 的映射关系
        if(!map.hasOwnProperty(k)){
   
   
        	// 随机获取颜色的序号，根据颜色列表的长度取随机值
            let index = parseInt(Math.random()*(colorList.length-1));
            // 如果列表中该序号对应的是 undefined，就再次获得序号，直到所对应的颜色序号不为 undefined
            while(colorList[index] == undefined){
   
   
                let index = parseInt(