记一次使用使用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
        //     }
        // }
    },
],
最后修改:2021 年 08 月 28 日 12 : 55 PM
如果覺得我的文章對你有用,請隨意讚賞