Echarts折线图 图例修改为横线

实现效果:

重点:
在lengend属性中 data 中设置icon
{ name: 'Target', icon: 'path://m0.010277,5.945418l24.979446,0l0,2.109164l-24.979446,0l0,-2.109164z' }

代码:

option = {
  legend: {
    data: [
      { name: 'Total', icon: 'rect'},
      { name: 'Target', icon: 'path://m0.010277,5.945418l24.979446,0l0,2.109164l-24.979446,0l0,-2.109164z' }
    ]
  },
  grid: {
    top: 100,
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Total',
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: 30
    },
    {
      name: 'Target',
      data: [160, 240, 180, 140, 120, 180, 190],
      type: 'line',
    }
  ]
};
THE END
posted @   ZerlinM  阅读(2048)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示