echart 常用属性

echart 常用属性

1|0基础属性

title 左上角标题
legend 每一项的列表
xAxis: x轴上的数据
yAxis: y轴上的数据

2|0提示框

tooltip: {
        trigger: 'axis'
    },

demo地址：https://echarts.apache.org/v4/examples/zh/editor.html?c=line-stack

3|0文字转动 斜着摆放

axisLabel.rotate: 30

4|0滚动条

dataZoom

5|0自定义工具箱

toolbox.feature.mySaveImg
这里自定义对象 mySaveImg 必须要以my开头
它里面有个 onclick: () => {}可以定义自己的点击事件
icon: '' 图标的svg代码
title: '' 显示的文字
show: true 是否显示

6|0每一项的列表带分页

legend: {
  textStyle: {
    color: '#333'
  },
  // data: legend,
  type: 'scroll',  // <--- 这个类型是滚动 plain 就是不分页
  orient: 'vertical',
  right: '-5',
  top: 'middle',
  width: 130,
  formatter: function (name) {
    return name.split('@')[0]
  }
},

7|0表格距离底部距离

grid.bottom

这里注意表格的总高，记得相应的调整，总高在外面的css里面

8|0分隔字符串函数 splitString

设置折行，超过几个字符，自动折行，在xAxis label 等显示文字的地方用。

const splitString = (str, count) => {
                  let result = []
                  for (let i = 0; i < str.length; i += count) {
                    result.push(str.substr(i, count))
                  }
                  return result.join('\n')
                }

__EOF__

本文作者：Reciter
本文链接：https://www.cnblogs.com/pengchenggang/p/18157886.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！