echarts属性集合和踩过的坑
众所周知，用echarts做报表对开发者是很方便的事情，我们只需要在不同的项目中引入对应的包，返回对应的数据格式，echars就能帮助我们解析出来想要的效果。
具体数据格式和实现效果可以借鉴管网实例
https://www.echartsjs.com/examples/
我在这里把echarts相关的属性整理一下
下面是一个常见的折线图
option:{
title: {
text: '折线图例',
top:'4%', --名称距离容器的距离，可以写像素，也可以写百分比(可以是负数呦)，对应的还有bottom,left,right
textStyle:{
color:'#fff', -- 字体颜色
fontSize:'100%' --字体大小，当然也可以是像素，也可以是百分比
}
},
tooltip: {
trigger: 'axis' --这个属性实现鼠标滑到对应位置时数据悬浮展示效果，里面trigger可以自己定义规则
},
legend: { --这里面是图标示例相关的属性，正常情况下我们可能会像下面这样写，效果如图
data:['一期','二期','生活用水','2.5万吨'],
top:'4%',
icon: "circle", // 这个字段控制形状 类型包括 circle(圆)，rect (长方形)，roundRect(带圆弧的长方形)，triangle(三角形)，diamond(棱形)，pin(椭圆)，arrow(类似于飞镖)，none(无)
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40 // 设置间距
orient: 'horizontal' //展示方向
},
我们会发现图例都展示在一行里，可是当我们data中数据很多的时候，会发现展示不开，即使用 orient 属性设置成竖向展示仍展示不开
其实legend也可以像series一样做成数组的形式的，比如下面这样，然后用top，bottom，left，right等属性摆放一下就可以了，就像下面的效果
legend: [
{
right: '-5%',
orient: 'horizontal',
data:['一期','二期','生活用水'],
top:'0%',
},{
right: '-2%',
data:['2.5万吨'],
top:'10%',
},
],
grid:{
top:'22%', --这里是距离容器的距离
bottom:'14%',
left: '12%',
right:'8%',
},
有时候我们会发现X轴和Y轴的数据跟我们实际的位置不一样
就是type这个属性在作怪，根据官网说法，类目轴的data中，二维数组的的第一项代表索引，而非x轴的值 ，只要把type改成value就好啦，Y轴也是一样
xAxis: {
type: 'category' //类型，categoryX轴的值，vlaue才是我们实际的值
boundaryGap: false,
data: ['9时','10时','11时'],
interval:1, 有时候我们容器很小，发现展示不开，这两个属性就可以用到了，这里1就是隔一个展示一个，2就是隔两个展示一个
rotate:1, 这个是让字体倾斜，放的是角度值 范围是好像是 -90到90
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //坐标线的颜色
width:'2' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff' //坐标值得具体的颜色
fontSize:'90%' //坐标值大小
}
},
splitLine:{show: false} //是否展示分割线
}
series: { //这个就不多数说了
{
name:'2.5万吨',
type:'line',
stack: '总量',
color:'#BA55D3',
data:[ 12.1, 11, 13, 13, 12.5, 13, 11]
}
]
},
再说一下仪表盘的一些属性吧
{
name:'二期水厂',
type:'gauge', //类型就是仪表盘
min:0, //从0开始
max:100, //最大到100
splitNumber:5, //分割成五份
center : ['75%', '29%'], //距离父容器的位置
radius: '46%', //角度
axisLine: { // 坐标轴线 外边那一圈
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']], 这里的0.2，0.8是外边一圈的范围
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10,
fontSize:'50%'
}
},
axisTick: { // 小分隔线
length :'10%', // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 大分隔线
length :'20%', // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3, //分割线宽度
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { //那个大的指针
shadowColor : '#fff', //默认透明
shadowBlur: 5,
length:'85%',
width:'6%'
},
title : { 就是那个pa相关
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: '70%',
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : { 底下值得属性
// backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 0,
borderColor: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: '10%',
offsetCenter: [0, '70%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#48D1CC',
fontSize:'90%'
}
}
最后说一下移动端自适应的问题，里面有个media属性，看官方文档
https://www.echartsjs.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94