Echarts柱体的修改，折线图上升下降不同颜色定制

最新做活需要用Echarts，前前后后做个记录。
1.柱状图,项目效果最终呈现如下。

常规的图表选择：

{
                            data: x_data, // 图表数据
                            type: 'bar', // 图表类型
                            showBackground: false, // 是否显示柱条的背景色
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)',
                            },// 每一个柱条的背景样式

我这里只用到了data，type参数。如果对柱体背景有定制，可以修改backgroundStyle，前提是showBackground为true。
对柱体本身的修改代码如下：

  itemStyle: {
                                normal: {
                                    barBorderRadius: [3, 3, 0, 0], // 柱体各个方向圆角度数
                                    label: {
                                        show: false,
                                        position: 'top',
                                        textStyle: {
                                            color: '#FD6B71',
                                        },
                                    },
                                    borderWidth: 1,// 柱条的描边宽度，默认不描边。
                                    // borderColor: '#18CEE2',
                                    // barBorderRadius: 28,
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        // { offset: 0, color: '#000' },
                                        { offset: 0, color: '#7d04a0' },
                                        { offset: 0.5, color: '#D509F5' },
                                        { offset: 1, color: '#7d04a0' },
                                    ]), // 柱条颜色，在这里我用了渐进色 offset参数从0-1
                                }, 
                                data: x_data,
                            },

这样我们就可以完成最终上面的效果展示图。
2.折线图，上升下降分别采用不同的颜色区分。最终效果如下：

折线图分别变色，这个在网上查找一番，有两个实现的方向：
1.series参数data，需要做分别不同的处理，以’-‘做数据填充。原文链接：https://blog.csdn.net/yapengliu/article/details/80192014
2.修改visualMap中的pieces参数,分段型视觉映射组件。
本人采用的就是第二种方式。
整体option如下：

                var option = {
                    grid:{ //可以控制canvas附近距离
                        top:0,
                        left:0,
                        right:0,
                        bottom:0
                    },
                    tooltip: { // 提示框组件
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                        },
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        data: xArr,
                        axisLabel: {
                            interArrival: 0,
                        },
                    },
                    visualMap: {
                        show: false,
                        type: 'piecewise',
                        dimension: 0,
                        pieces: [], // 动态修改pieces
                        outOfRange: {
                            color: 'green',
                        },// 选中范围外 的视觉元素
                    },

                    yAxis: {
                        type: 'value',
                        min:0, // y轴最小
                        max:300, // y轴最大
                        splitNumber:15, //分割粒度
                        axisLabel: {
                            formatter: '{value}',
                        },
                        axisPointer: {
                            snap: true,
                        },
                    },

                    series: [{ data: xAxis_arr, type: 'line' }],
                };

api接口如下：

status为0下降，为1上升。我们需要遍历处理这个arr。

				var j = 0;
                // var n;
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].status == 1 && arr[i + 1]) {
                        option.visualMap.pieces[j] = {
                            gte: arr[i - 2].id,
                            lte: arr[i + 1].id,
                            color: '#800080',
                        };
                        j++;
                    } else if (arr[i - 1]) {
                        option.visualMap.pieces[j] = {
                            gte: arr[i - 1].id,
                            lte: arr[i].id,
                            color: '#800080',
                        };
                    }
                }

根据状态分别赋值每一段范围内容文字颜色，可以使用 lt（小于，little than），gt（大于，greater than），lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）来表达边界。
项目到此就完工了。