echart 常用属性

echart 常用属性

基础属性

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

提示框

tooltip: {
        trigger: 'axis'
    },

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

文字转动 斜着摆放

axisLabel.rotate: 30

滚动条

dataZoom

自定义工具箱

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

每一项的列表带分页

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

表格距离底部距离

grid.bottom

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

分隔字符串函数 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')
                }