echarts参数配置示例——legend图例属性设置 & tooltip之formatter自定义显示内容

echarts参数配置示例——legend图例属性设置 & tooltip之formatter自定义显示内容

1、legend图例属性设置

//Echarts数据可视化legend图例属性设置
legend={
    show:true,                                  //是否显示
    zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
    left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
    top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
    right:"auto",                               //组件离容器右侧的距离,'20%'
    bottom:"auto",                              //组件离容器下侧的距离,'20%'
    width:"auto",                               //图例宽度
    height:"auto",                              //图例高度
    orient:"horizontal",                        //图例排列方向
    align:"auto",                               //图例标记和文本的对齐,left,right
    padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    itemGap:10,                                  //图例每项之间的间隔
    itemWidth:25,                               //图例标记的图形宽度
    itemHeight:14,                              //图例标记的图形高度
    formatter:function (name) {                 //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
        return 'Legend ' + name;
    },
    formatter: function(name){
    　　　　return name.length>12?name.substr(0,12)+"...":name;
　　},													//legend文字超出宽度显示省略号
    selectedMode:"single",                    //图例选择的模式,true开启,false关闭,single单选,multiple多选
    inactiveColor:"#ccc",                     //图例关闭时的颜色
    textStyle:mytextStyle,                    //文本样式
    data:['类别1', '类别2', '类别3'],          //series中根据名称区分
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                         //边框颜色
    borderWidth:0,                               //边框线宽
    shadowColor:"red",                          //阴影颜色
    shadowOffsetX:0,                            //阴影水平方向上的偏移距离
    shadowOffsetY:0,                            //阴影垂直方向上的偏移距离
    shadowBlur:10,                               //阴影的模糊大小
};

2、示例

 let barData = [{name:'name1',age:'18',sex:'0'}];
var barOption = {
        title: {
          text: 'echarts图标title',
        },
        legend: {
          show: false, // 是否显示图例
        },
        grid: {
          x: "3.5%", ；//左侧 y轴内容距离边框的距离（类似padding-left）
        },
        color: ["#35D2FF"], // 条形颜色
        tooltip: { // 鼠标经过 tip提示
          trigger: "item", // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。 默认为 'item'
          backgroundColor: "rgba(43,43,43,1)",
          borderRadius: 4,
          borderWidth: 1,
          padding: 10,
          // hideDelay:100, // 延迟消失
          extraCssText: // tip样式
            "width:199px!important;height:114px;background:rgba(255,255,255,0.94);box-shadow:0px 10px 35px 0px rgba(9,26,66,0.2);border:none;border-radius:20px;display:flex;flex-direction: column;justify-content: space-between;padding:0;margin:0",
          formatter: function(params) { // tip显示的具体内容
            let name = name,
              age = age,
              sex = sex;
            return `
            <div><em> ${name}</em> </div> 
            <div><em>${num}岁</em> </div> 
            <div>性别<em>${sex}</em></div> `;
          },
          textStyle: {
            color: "rgba(0,0,0,0.45)",
          },
        },
        dataset: {
          dimensions: ["dept_name", "num", "percentage", "dept"],
          source: [...barData], // 绑定数据源
        },
        xAxis: { // x轴
          type: "category",
          axisLine: {
            lineStyle: { // x轴 线条颜色
              color: "#F3F3F3",
            },
          },
          axisLabel: {
            textStyle: {  // x轴 lable样式
              color: "#3B4042",
              fontSize: 14,
              fontWeight: 400,
            },
            rotate: 300, // 旋转角度
            interval: 0, // 间隔
          },
          offset: 5, // 偏移 （标题距离x轴的距离）
        },
        grid:{
          y2:100
        },
        yAxis: {
          min: 0,
          // max: 100,
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#FFF", // y轴颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#3B4042", // y轴 刻度
            },
          },
          splitLine: {
            // 辅助线
            show: true,
            lineStyle: {
              color: "#F3F3F3",
              width: 1,
            },
          },
        },
        series: [
          {
            type: "bar",
            barMaxWidth: 10, // 最大宽度
            itemStyle: {
              normal: { barBorderRadius: [15] },
            },
          },
        ],
      };
        myBarChart.setOption(barOption, true);