echarts提供xy轴和内容数据的方法

作者： TzuHsing Su
发布时间：2021-08-28
774 次瀏覽
暫無評論
1116字数
分類： web前端

#### 记一次使用使用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
        //     }
        // }
    },
],
```

最后修改：2023-04-01