Echarts基础样式+自定义图例

为 ECharts 准备一个定义了宽高的 DOM

<div id="main" style="width: 600px; height: 400px"></div>

指定图表的配置项和数据，没有高亮显示，只是数据展示

 var option = {
    color: color,//[]固定颜色值，也可以不添加使用默认的。
    title: {
     //标题
      text: title,
      left: "center",
      textStyle: {
        fontSize: 18,
        // color: "#262F3D",
        color: "#555",
      },
    },
    grid: {
    //图表位置
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
     xAxis: xAxis,//柱状图
     yAxis:yAxis,//柱状图
     series:series
  };
    
    //下面是各个图表类别
    

1.bar柱状图：指定图表的配置项和数据

var xAxis = {
      type: "category",
     // data: categories,
    // axisLabel: getAxisLabel(categories),//可以用方法更好的判断，方法就不展示了
     data:[
              "2023-12-11至2023-12-29",
              "2023-12-11至2023-12-29",
              "2023-12-11至2023-12-29",
              "2023-12-11至2023-12-29",
              "2023-12-11至2023-12-29",
              "2023-12-11至2023-12-29",
              "2023-12-11至2023-12-29",
             ],
    axisLabel:{
        interval: 0, //横轴信息全部显示，1：隔一个标签显示一个标签，2：隔两个标签显示一个标签，以此类推
        rotate: 30, //倾斜度
        // x轴标签的字体样式
        textStyle: {
          color: "#000",
          fontSize: 12,
        },
        //  超过30个字符显示省略号
        formatter: function (params) {
          var val = "";
          if (params && params.length >= 30) {
            val = params.substr(0, 30) + "...";
            return val;
          } else {
            return params;
          }
        },
      },
    },
    
   var yAxis = {
      type: "value",
    },
    
    //如果做横向柱状图的话，把xAxis和yAxis的值互换，修改柱子圆角部分

   var series = [
        //两个柱状图
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        barMaxWidth: 20, //最大柱宽度，
        barCategoryGap: "10%", //柱间距离
        name: "name2",
        itemStyle: {
          borderRadius: [20, 20, 0, 0], //柱子圆角
        },
      },
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        barMaxWidth: 20,
        barCategoryGap: "10%",
        name: "name1",
        itemStyle: {
          borderRadius: [20, 20, 0, 0],
        },
      },
    ],
  

2.bar多色柱状图：指定图表的配置项和数据 其他一样，只是ySeries不一样

     var ySeries = [
             {
            data: getYData([
              120, 200, 150, 80, 70, 110, 130, 22, 33, 44, 130, 22, 33]), 
            type: "bar",
            barMaxWidth: 20,
            itemStyle: {
                    borderRadius: [20, 20, 0, 0],
                       },
             }];
  
    //柱状图多个数据显示颜色
    function getYData(yData) {
     var data = yData.map((v, index) => {
       return {
         value: v,
         itemStyle: {
           color: color[index],
                },
              };
            });
         return data;
          }

3.pie饼图：指定图表的配置项和数据

     var series=[{
        type: "pie",
        radius: "55%",
        data: pSeries,
        
       // 图形样式
        itemStyle: {
          borderRadius: 6,
          borderColor: "#fff",
          borderWidth: 1,
        },
        //图形上的文本标签
        label: {
          show: true, // 显示标签
          formatter: "{name|{b}: }{num|{d}%}",
          distanceToLabelLine: 5,
          fontSize: 10,
          rich: {
            name: {
              color: "rgb(110, 112, 121)",
            },
            num: {
              color: "rgb(72, 73, 75)",
            },
          },
        },
      },
    ],
  };
          

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

自定义图例：

 <!-- 为 图例 准备的 DOM -->
<div id="legendContainer"></div>

引用的方法 // 基于准备好的dom展示图例

const legendChart = getLegend(ySeries);
document.getElementById("legendContainer").appendChild(legendChart);

//图例方法

  function getLegend1(
    data,
    isName = false, //是否取date[i].name
    isLine = false //是否是折线图
  ) {
    var colorList = [...color];
          if (data.length > colorList.length) {
      for (let i = 0; i < data.length; i++) {
        colorList.push(colorList[i % colorList.length]);
      }
          }
    var columns = 7;
    var legend = document.createElement("div");
    legend.className = "legend-box";
    var legendList = document.createElement("div");
    legendList.className = "legendList";
    legend.appendChild(legendList);
    var styles = "";

 for (let i = 0; i < data.length; i++) {
  var dataText = isName ? data[i] : is3D ? data[i].text : data[i].name;
  var legendText = document.createElement("span");
  legendText.className = `legendText legendText-${i}`;
  legendText.innerHTML = dataText;
  legendList.appendChild(legendText);

styles += `
    .legendText-${i}::before {
      content: "";
      position: absolute;
      display: inline-block;
      width: ${isLine ? 7 : 16}px;
      height: 7px;
      background-color: ${colorList[i]};
      border-radius: 10px;
      top: 3px;
      left: -20px;
    }
    .legendText-${i}::after {
      content: "";
      position: absolute;
      width: ${isLine ? 18 : 0}px;
      height: 1.3px;
      background-color: ${colorList[i]};
      border-radius: 10px;
      top: 6px;
      left: -26px;
    }
    `;
 }
  var style = document.createElement("style");
  style.innerHTML = `
    .legend-box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: ${isLine ? 35 : 20}px;
    } 
    .legendList {
        display: grid;
        grid-template-columns: repeat(${columns}, 1fr);
        gap:8px 35px;
        margin-left: ${isLine ? 35 : 20}px;
    }
    .legendText {
        position: relative;
        color: rgb(72, 73, 75);
        font-size: ${max >= 40 && columns > 1 ? 10 : 12}px;
        line-height: 12px;
    }
    ${styles}
  `;
  document.head.appendChild(style);

return legend;
}