ECharts 柱状图 改变柱子颜色+柱子上方显示文字与图标

 

 

        var option = {
            // title: {
            //     text: '资源总览',
            //     left:'20px',
            //     textStyle: {    
            //     color: "#436EEE",
            //     fontSize: 17,   
            //     }
            // },
           tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(255,255,255,1)",
        borderWidth: "2",
        borderColor: "#d6d6d6",
        textStyle: {
          color: "#afafaf",
          fontSize: "12px"
        },
        padding: 0,
        formatter: function(params) {
          var res = params[0].name;
          res += "<style>td{padding:5px;}</style><table>";
          res += "<tr><td>指标</td><td>金额</td>";
          res += "<td>占比</td></tr>";
          let listNumber = 0;
          params.map(item => {
            listNumber += parseFloat(item.value);
          });
          for (let i = 0; i < params.length; i++) {
            let val = 0;
            if (listNumber) {
              val =
                (parseFloat(params[i].value) / listNumber).toFixed(2) * 100 +
                "%";
            } else {
              val = val + "%";
            }
            res +=
              "<tr><td>" + params[i].seriesName + "</td><td>" + params[i].value;
            res += "</td><td>" + val;
            // res += '</td><td>'+params[i].data.datas[1];
            // res += '</td><td>'+params[i].data.datas[2];
            res += "</td></tr>";
          }
          // res += '<tr><td>'+params[params.length-1].seriesName+'</td><td>'+params[params.length-1].value+'</td></tr>';
          res += "</table>";
          return res;
        }
        // formatter(params) {
        //   let text = "";
        //   text = `<div style="border-bottom: 2px solid #d6d6d6;height:40px;background-color: #f2f2f2;position: relative;width: 200px">`;
        //   text += `<div style="position:absolute;left:5px;top: 10px">${params[0].axisValue}</div>`;
        //   text += "</div>";
        //   if (res.model.toolTips) {
        //     let showTooltipsArray = [];
        //     if (params && params.length == 1) {
        //       showTooltipsArray = res.model.toolTips.filter(v => {
        //         return v.indexOf(params[0].seriesName) > -1;
        //       });
        //     } else {
        //       showTooltipsArray = res.model.toolTips;
        //     }
        //     showTooltipsArray.forEach((v, j) => {
        //       text += `<div style="${
        //         j !== showTooltipsArray.length - 1
        //           ? "border-bottom: 2px solid #d6d6d6;padding: 5px 10px"
        //           : "padding: 5px 10px"
        //       }"><div>${v}</div>`;
        //       if (params.length == 4) {
        //         if (
        //           (that.table == 1 && that.itemIndex == 1) ||
        //           (that.table == 1 && that.itemIndex == 2)
        //         ) {
        //           if (j == 0) {
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[1].marker
        //             } ${
        //               that.stackValue[1].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[1].formatData[
        //                 params[1].dataIndex
        //               ]
        //             }</span></div>`;
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[3].marker
        //             } ${
        //               that.stackValue[3].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[3].formatData[
        //                 params[3].dataIndex
        //               ]
        //             }</span></div>`;
        //           } else {
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[0].marker
        //             } ${
        //               that.stackValue[0].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[0].formatData[
        //                 params[0].dataIndex
        //               ]
        //             }</span></div>`;
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[2].marker
        //             } ${
        //               that.stackValue[2].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[2].formatData[
        //                 params[2].dataIndex
        //               ]
        //             }</span></div>`;
        //           }
        //         } else {
        //           if (j == 0) {
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[0].marker
        //             } ${
        //               that.stackValue[0].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[0].formatData[
        //                 params[0].dataIndex
        //               ]
        //             }</span></div>`;
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[2].marker
        //             } ${
        //               that.stackValue[2].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[2].formatData[
        //                 params[0].dataIndex
        //               ]
        //             }</span></div>`;
        //           } else {
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[1].marker
        //             } ${
        //               that.stackValue[1].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[1].formatData[
        //                 params[0].dataIndex
        //               ]
        //             }</span></div>`;
        //             text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //               params[3].marker
        //             } ${
        //               that.stackValue[3].stackDescription
        //             }:<span style="position: absolute;right: 10px">${
        //               res.model.series[3].formatData[
        //                 params[0].dataIndex
        //               ]
        //             }</span></div>`;
        //           }
        //         }
        //       } else {
        //         let seriesName = "";
        //         if (
        //           (that.table == 2 && that.itemIndex == 5) ||
        //           (that.table == 3 && that.itemIndex == 5)
        //         ) {
        //           seriesName = params[j].seriesName;
        //         } else {
        //           seriesName = res.model.series[j].title;
        //         }
        //         text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
        //           params[j].marker
        //         } ${seriesName}:<span style="position: absolute;right: 10px">${that.thousands(
        //           params[j].value
        //         )}</span></div>`;
        //       }
        //       text += "</div>";
        //     });
        //   }
        //   return text;
        // }
      },
      grid: {
        left: "2%",
        right: "2%",
        top: "5%",
        bottom: "15%",
        containLabel: true
      },
            legend: {
                itemWidth:15,  
                itemHeight:15,  
                data:['可用','不可用','不可用2','不可用3','不可用4'],
            },
            xAxis: {
                data: ["网络设备","服务器","应用","其他","虚拟机","存储"],
                splitLine:{
                    show:false,
                },
            },
            yAxis: {
                 splitLine:{
                    show:false,
                },
            },
            series: [{
                name: '可用',
                type: 'bar',
                stack:'使用情况',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle:{
                     normal:{color:"#FF8849"},
                }
            },{
                name: '不可用',
                type: 'bar',
                stack:'使用情况',
                data: [40, 22, 18, 35, 42, 40],
                itemStyle:{
                     normal:{color:"#3FBB49"},
                }
            },{
                name: '不可用2',
                type: 'bar',
                stack:'使用情况',
                data: [40, 22, 18, 35, 42, 40],
                itemStyle:{
                     normal:{color:"red"},
                }
            },{
                name: '不可用3',
                type: 'bar',
                stack:'使用情况',
                data: [40, 22, 18, 35, 42, 40],
                itemStyle:{
                     normal:{color:"yellow"},
                }
            },{
                name: '不可用4',
                type: 'bar',
                stack:'使用情况',
                data: [40, 22, 18, 35, 42, 40],
                itemStyle:{
                     normal:{color:"red"},
                },
                 markPoint: {
                symbol:'circle',
                // symbol:'image://http://echarts.baidu.com/images/favicon.png',
                itemStyle:{
                  normal:{
                    label:{
                      show:true,
                      color:'yellow',
                      formatter: function (param) {
                        // if(param.data.coord[1]>20){
                         return '优秀'
                        // }else if (param.data.coord[1]>10){
                        //   return '良好'
                        // } else {
                        //   return '不达标'
                        // }
                        // return param.name
                      }
                    },
                    color:'#BD60F6'
                  }
                },
                symbolSize:1,
                symbolOffset:[0,-35],
                data:[
                  {name:'啦啦',coord:[0,15]},
                  {name:'天天',coord:[1,20]},
                  {name:'委婉',coord:[2,36]},
                  {name:'444',coord:[3,13]},
                  {name:'555',coord:[4,16]},
                  {name:'寄快递',coord:[5,8]},
                  {name:'看看',coord:[6,32]},
                ],
              },
            }]
        };