编程大白话之-echarts使用记录

echarts在图形辅助中排名数一数二的，虽然平常用到的不是很多，但也难免会遇到，而在使用中经常会遇到一些问题点，这里记录一下，便于下次遇到时更快的处理，如有错误请指出！

1.x轴名称不能完全显示

x轴名称不能完全显示.png 修改完成后.png

x轴的名称太长不能完全展示出来

xAxis: [
  {
    type: 'category',
    data: ['', '', ''],
    nameLocation: 'end',
    axisLabel: {
      // interval: 0, // 每一个名称之间的间距为0，这时X轴最后一个名称颜色会自动加深
      interval: 'auto', // 改为auto解决
      rotate：45 // 文字倾斜设为45度
    }
  }
]

2.名称太长的解决方案
按照上面所说的方法，较短的名称可以解决，但如果遇到很长的数据时，又会有新问题，如图：

名称太长.png 更改后的样式.png

一种解决办法是增加底部的高度
grid: {
  bottom: '30%' // 将底部的高度按比例设置，虽然可以全部展示，但图形的高度受到了影响
}
将超出规定的字符变成...
  axisLabel: {
      interval: 'auto',
      rotate：45，
      formatter: function(value, index) { // 通过计算字符串的长度，来将后面的变成...
        var v = value.substring(0,  4) + '...'
        return value.length > 5 ? v : value
      }
    }

3.柱形图叠加不同的宽度

不同宽度柱形叠加.png

柱形叠加图设置成不同宽度的柱形，图中为完成后的样式

series: [
  {
    itemStyle: {
      normal: {
        borderColor: '#f8cbad',
        borderWidth: 10 // 主要是给需要加宽的柱形参数中添加边框，边框与背景色相同时，增加宽度
      }
    }
  }
]

4.柱状与折线在同一个图形中，折线点显示参数并添加单位

完成效果.png

series绘制中多添加一个对象，作为折线的数据
series: [
  {
    type: 'line',
    yAxisIndex：1，
    data: [20, 50, 10, 23, 69, 100, 88, 11, 89], // 这个是比例数据，注意不要超出100%
    itemStyle: {
      normal: {
        label: {
          show: true, // 是否转折点展示数据
          position: 'top', // 展示的位置，(中间inside）
          formatter: '{c} %', // 数据后面添加单位
          textStyle: { // 设置展示数据的样式，不设置会默认线的颜色
            color: 'black',
            fontSize: 16
          }
        }
      }
    } 
  }
]

5.饼图提示文字与划入提示

效果展示.png

// 饼图在两种提示的文字设置中，参数略有不同
// 划入提示
tooltip: {
  trigger: 'item',
  formatter: '{b} : {c} <br/> {d}%' // <br/>换行符
}
// 页面直接提示信息，在series中直接进行添加设置
series:[
  {
    type: 'pie',
    raduius: '45%',
    data: [{name: '', value: ''}],
    itemStyle: {
      normal: {
        label: {
          show: true,
          formatter: '{b} \n {c} ({d}%)'  // \n 作为换行符
        }，
        labelLine: {show: true}
      }
    }
  }
]

持续更新中...