折线图遍历区域颜色渐变

最新推荐文章于 2024-11-11 16:34:08 发布

33455432

最新推荐文章于 2024-11-11 16:34:08 发布

阅读量235

点赞数 2

文章标签： chrome 前端

本文链接：https://blog.csdn.net/weixin_38999134/article/details/142785813

版权

在这里插入图片描述

// 自适应颜色折线图
            drawautomaticline(){
                this.proteinline = this.$echarts.init(document.getElementById('danhaoline'));
                let color = [
                    "#1C70DD",
                    "#01FED2",
                    "#D91F23",
                    "#FFAA01",
                    "#36CE9E",
                ]
                this.proteinline.setOption({
                    color: color,
                    legend: {
                    
                    },
                    tooltip: {
                        trigger: "axis",
                        
                    },
                    grid: {
                        
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#333"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        // data: ["1", "2", "3", "4", "5", "6", "7", "8"]
                        data: this.autoadata
                    }],
                    yAxis: [{
                        type: "value",
                        // name: '单位：万千瓦时',
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series:this.autoydata,
                //     series: [{
                //         name: "2018",
                //         type: "line",
                //         smooth: true,
                //         areaStyle: {
                //             normal: {
                //                 color: new echarts.graphic.LinearGradient(
                //                     0,
                //                     0,
                //                     0,
                //                     1,
                //                     [{
                //                             offset: 0,
                //                             color: hexToRgba(color[0], 0.3)
                //                         },
                //                         {
                //                             offset: 1,
                //                             color: hexToRgba(color[0], 0.1)
                //                         }
                //                     ],
                //                     false
                //                 ),
                //                 shadowColor: hexToRgba(color[0], 0.1),
                //                 shadowBlur: 10
                //             }
                //         },
                //         data: [100, 138, 350, 173, 180, 150, 180, 230]
                //     } 
                // ]
                });
            },

从后台获取数据处理

 // 单耗统计--通用辅料单位消耗及走势图
            getMaterialConsumptionTrend(){
                let data={
                    beginDate:this.beginDate,
                    endDate:this.endDate,
                    timePeriod:this.timePeriod,
                }
                MaterialConsumptionTrend(data).then((response) => {
                    this.ConsumptiondataList=response.dataList
                    this.tableConsumptionColumnList=response.tableColumnList
                    let color = [
                        "#1C70DD",
                        "#01FED2",
                        "#D91F23",
                        "#FFAA01",
                        "#36CE9E",
                    ]
                    const hexToRgba = (hex, opacity) => {
                        let rgbaColor = "";
                        let reg = /^#[\da-f]{6}$/i;
                        if (reg.test(hex)) {
                            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                        }
                        return rgbaColor;
                    }
                    response.multipleLineChartVO.yaxis.forEach((item,i) => {
                        this.$set(item, 'type', 'line')
                        this.$set(item, 'smooth', 'true')
                        this.$set(item, 'symbol', 'circle')
                        this.$set(item, 'areaStyle', {
                            normal: {
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[i], 0.3)
                                    },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[i], 0.1)
                                    }],false
                                ),
                                shadowColor: hexToRgba(color[i], 0.1),
                                shadowBlur: 10
                            }
                        })
                    })
                    this.autoadata=response.multipleLineChartVO.xaxis
                    this.autoydata=response.multipleLineChartVO.yaxis
                    this.$nextTick(()=> {
                        this.drawautomaticline()
                    })
                })
            },