记一次使用使用echarts的经历
由于项目需要,不得不使用echarts做一个数据分析的图表,在做这个东西之前一直觉得echarts很恶心,看见就烦。而这次做的项目整好本来项目里面已经配置好了一个echarts组件,只要提供option就能生成。当然使用echarts最主要的问题也是echarts。然后我就尝试对着官网上的案例折腾。这里我提供几个快速入门echarts的方法:
- option里面有一个非常重要的字段series,他是一个数组
- series字段需要提供一个数组对象,数组的每一项可以代表着图表中的一条线(比如折线图,显示西瓜和苹果每天的销售额的对比,那就要向series提供数组长度为2的对象数组),而对象中的type值决定以什么图显示如折线图 饼图等
- 图标中显示的数据也是在series中的对象里面的data提供
- 而x轴和y轴坐标的数据可以是按series中的对象里面的data提供,也可以是独自提供。也是数组。
- series的对象中 areaStyle设置成auto可以变成面积图
xAxis: [
{
type: 'category',
name: '日期',
boundaryGap: false,
minInterval: 1,
axisLabel: {
showMinLabel: false,
showMaxLabel: false,
interval: 0,
rotate: 90,
formatter: function (value,index){
return value
},
}
}
],
yAxis: [
{
type: 'value',
name: 'y轴名称',
// axisLabel: {
// formatter: function (value,index){
// return (value.value - Math.abs((value.debt)))/100
// }
// }
},
],