echarts legend修改形状

legend: {
 
  icon: "circle",   //  字段控制形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
 
  itemWidth: 10,  // 设置宽度
 
  itemHeight: 10, // 设置高度
 
  itemGap: 40 // 设置间距
 
},

icon 也可自定义图片

  icon : 'image://../../images/hsyb/water.png'   /* image://  后跟图片路径*/

值得一提的当icon:'line’时,itemHeight设置高度无效,可设置为icon:‘rect’,矩形后再设置高度。

取消/禁止echarts图例组件legend上的点击事件

 legend: {
      selectedMode: true, // 是否允许点击
    }

Echarts - legend属性设置

        legend: {
          show: true, //是否显示
          type: "plain", // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例
          zlevel: 1, // 所有图形的 zlevel 值。
          icon: "circle",
          top: "5%", // bottom:"20%" // 组件离容器的距离
          right: "5%", //left:"10%"  // // 组件离容器的距离
          width: "auto", // 图例组件的宽度
          height: "auto", // 图例组件的高度
          orient: "horizontal", // 图例列表的布局朝向。 'horizontal'  'vertical'
          align: "auto", // 图例标记和文本的对齐
          padding: 5, // 图例内边距
          itemWidth: 6, // 图例标记的图形宽度。
          itemGap: 20, // 图例每项之间的间隔。
          itemHeight: 14, //  图例标记的图形高度。
          symbolKeepAspect: true, // 如果图标(可能来自系列的 symbol 或用户自定义的 legend.data.icon)是 path:// 的形式,是否在缩放时保持该图形的长宽比。
          formatter: function (name) {
            return '{a|text}{a|   }{b|' +  name + '}'
          },
          selectedMode: true, // 图例选择的模式,
          inactiveColor: "#ccc", // 图例关闭时的颜色。
          textStyle: {
            color: "#556677", // 文字的颜色。
            fontStyle: "normal", // 文字字体的风格。
            fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold'  'bolder' 'lighter'  100 | 200 | 300 | 400...
            fontFamily: "sans-serif", // 文字的字体系列。
            fontSize: 12, // 文字的字体大小。
            lineHeight: 20, // 行高。
            backgroundColor: "transparent", // 文字块背景色。
            borderColor: "transparent", // 文字块边框颜色。
            borderWidth: 0, // 文字块边框宽度。
            borderRadius: 0, // 文字块的圆角。
            padding: 0, // 文字块的内边距
            shadowColor: "transparent", // 文字块的背景阴影颜色
            shadowBlur: 0, // 文字块的背景阴影长度。
            shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
            shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
            // width: 50, // 文字块的宽度。 默认
            // height: 40, // 文字块的高度 默认
            textBorderColor: "transparent", // 文字本身的描边颜色。
            textBorderWidth: 0, // 文字本身的描边宽度。
            textShadowColor: "transparent", // 文字本身的阴影颜色。
            textShadowBlur: 0, // 文字本身的阴影长度。
            textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
            textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
            rich: {
            a: {
              color: "red",
              lineHeight: 10,
            },
             b: {
              color: "#fff",
              lineHeight: 10,
            },
          }, // 自定富文本样式
          },
        },

echarts 随屏幕大小改变大小(resize)
直接用window.onresize = myEChart.resize
resize 用来改变图表尺寸,在容器大小发生改变时需要手动调用。
例如:

var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option={title:{text:'ECharts 入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = myChmyECharart.resize;
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值