一个坐标系多个线、点，并对坐标系做了样式规范ECharts Gallery

20:11:45图表已生成
代码
// var uploadedDataURL = "/asset/get/s/data-1554186516223-_pB3Iuszf.png";
// var uploadedDataURL = "/asset/get/s/data-1554186502950-0U3oBu2pQ.png";

//下面这几个值可以根据项目的实际情况来
var predictOne = "3.51";
var predict = "4.38";

option = {
    legend: {
        show: true,
        orient: 'vertical',
        right: 20,
        top: 50,
        selected: true,
        itemGap: 4,
        data: [
            {
                name:'之前',
                icon:'line',
                //icon自定义为图片，因为icon提供的满足不了项目，也可以设置不同颜色
                icon:'image://asset/get/s/data-1554186502950-0U3oBu2pQ.png'
            },
            {
                name:'之后',
                icon:'line',
                //icon自定义为图片，因为icon提供的满足不了项目，也可以设置不同颜色
                icon:'image://asset/get/s/data-1554186516223-_pB3Iuszf.png'
            }
        ]
    },
    xAxis: {
        min: '0',
        max: '7',
        axisLine: {
            onZero: true
        },
        name: '时间(S)',
        nameGap: 6, //轴名字距离轴距离
        splitLine: {
            show: false
        },
        axisTick: {
            inside: true,
        },
        axisLabel: {
            showMinLabel: false,
            showMaxLabel: false
        },
    },
    grid: {
        right: '16%',
    },
    yAxis: {
        name: '容积(L)',
        // max:'5',
        // 根据数据自定义最大值的范围
        max: function(value) {
            if (value.max > 6) {
                return 8;
            } else if (value.max > 4) {
                return 6;
            } else {
                return 4;
            }
        },
        axisTick: {
            inside: true,
            // show:false,//显示轴的刻度
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            showMaxLabel: false,
            // show:false,//显示轴的数据
        },
    },
    series: predict > 0 ? [
        // 画横线
        {
            type: 'line',
            smooth: true,
            animation: false, //绘制线的动画
            symbol: 'none',
            data: [
                [0, predict],
                [7, predict]
            ],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#333333',
                        width: 1,
                        type: 'dotted'
                    }
                }
            },
            markPoint: {
                label: {
                    color: '#000',
                },
                itemStyle: {
                    color: 'transparent'
                },
                data: [{
                    xAxis: 7,
                    yAxis: predict,
                    // coord:['5','0'],//两种写法都行
                    value: '横虚线',
                    symbolOffset: [-13, 35], //置单个点位置移动情况 向右，下
                }]
            }
        },
        // 画竖线
        {
            type: 'line',
            smooth: true,
            animation: false, //绘制线的动画
            symbol: 'none',
            data: [
                [6, 0],
                [6, Number(predict) + 1]
            ],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#333333',
                        width: 1,
                        type: 'dotted'
                    }
                }
            },
            markPoint: {
                label: {
                    color: '#000',
                },
                itemStyle: {
                    color: 'transparent'
                },
                data: [{
                    coord: ['6', '0'],
                    value: '竖虚线',
                    symbolOffset: [15, 20], //置单个点位置移动情况 向右，下
                }]
            }
        },
        // 画点
        {
            type: 'line',
            symbol: 'circle', //设定为实心点
            symbolSize: 4, //设定实心点的大小
            hoverAnimation: false,
            animation: false, //绘制线的动画
            color: '#333333', //设置点的颜色                  
            data: [
                [1, predictOne]
            ],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#333333', //设置线的颜色
                        width: 1,
                    }
                }
            },
            markPoint: {
                label: {
                    color: '#000',
                    position: [20, 38], //设置全部点位置移动情况右，下
                },
                itemStyle: {
                    color: 'transparent'
                },
                data: [{
                    xAxis: 1,
                    yAxis: predictOne,
                    value: '一个点',
                }, ]
            },
        },
        // 画一条曲线
        {
            name:'之前',
            type: 'line',
            smooth: true,
            symbol:'none',
            data:[[0.0,0.0],[0.04,0.476],[0.08,0.858],[0.12,1.168],[0.16,1.43],[0.2,1.67],[0.24,1.884],[0.28,2.085],[0.32,2.272],[0.36,2.441],[0.4,2.591],[0.44,2.726],[0.48,2.845],[0.52,2.949],[0.56,3.044],[0.6,3.131],[0.64,3.21],[0.68,3.285],[0.72,3.354],[0.76,3.416],[0.8,3.473],[0.84,3.526],[0.88,3.575],[0.92,3.619],[0.96,3.661],[1.0,3.699],[1.04,3.734],[1.08,3.767],[1.12,3.798],[1.16,3.827],[1.2,3.853],[1.24,3.879],[1.28,3.902],[1.32,3.925],[1.36,3.946],[1.4,3.966],[1.44,3.985],[1.48,4.004],[1.52,4.022],[1.56,4.039],[1.6,4.056],[1.64,4.072],[1.68,4.087],[1.72,4.101],[1.76,4.115],[1.8,4.13],[1.84,4.144],[1.88,4.157],[1.92,4.17],[1.96,4.182],[2.0,4.194],[2.04,4.204],[2.08,4.215],[2.12,4.226],[2.16,4.235],[2.2,4.243],[2.24,4.243],[2.28,4.243],[2.32,4.243],[2.36,4.243],[2.4,4.243]],//要渲染的坐标
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'#333333',//线的颜色
                        width: 2,
                    }  
                }  
            }
        },
         // 画一条曲线
        {
            name:'之后',
            type: 'line',
            smooth: true,
            symbol:'none',
            data:[[0.0,0.0],[0.04,0.3],[0.08,0.415],[0.12,0.543],[0.16,0.675],[0.2,0.805],[0.24,0.933],[0.28,1.062],[0.32,1.193],[0.36,1.327],[0.4,1.456],[0.44,1.583],[0.48,1.707],[0.52,1.826],[0.56,1.94],[0.6,2.05],[0.64,2.158],[0.68,2.262],[0.72,2.365],[0.76,2.463],[0.8,2.562],[0.84,2.658],[0.88,2.749],[0.92,2.835],[0.96,2.919],[1.0,3.001],[1.04,3.077],[1.08,3.141],[1.12,3.197],[1.16,3.25],[1.2,3.302],[1.24,3.35],[1.28,3.394],[1.32,3.436],[1.36,3.474],[1.4,3.506],[1.44,3.538],[1.48,3.572],[1.52,3.6],[1.56,3.621],[1.6,3.641],[1.64,3.66],[1.68,3.68],[1.72,3.699],[1.76,3.721],[1.8,3.74],[1.84,3.759],[1.88,3.778],[1.92,3.795],[1.96,3.812],[2.0,3.826],[2.04,3.84],[2.08,3.854],[2.12,3.867],[2.16,3.878],[2.2,3.889],[2.24,3.901],[2.28,3.917],[2.32,3.911],[2.36,3.924],[2.4,3.934],[2.44,3.946],[2.48,3.956],[2.52,3.966],[2.56,3.977],[2.6,3.987],[2.64,3.997],[2.68,4.005],[2.72,4.015],[2.76,4.022],[2.8,4.023],[2.84,4.035],[2.88,4.042],[2.92,4.05],[2.96,4.06],[3.0,4.068],[3.04,4.076],[3.08,4.084],[3.12,4.092],[3.16,4.101],[3.2,4.109],[3.24,4.116],[3.28,4.122],[3.32,4.129],[3.36,4.135],[3.4,4.142],[3.44,4.149],[3.48,4.154],[3.52,4.159],[3.56,4.165],[3.6,4.173],[3.64,4.178],[3.68,4.183],[3.72,4.189],[3.76,4.195],[3.8,4.2],[3.84,4.205],[3.88,4.209],[3.92,4.215],[3.96,4.22],[4.0,4.226],[4.04,4.23],[4.08,4.234],[4.12,4.239],[4.16,4.243],[4.2,4.245],[4.24,4.245],[4.28,4.245],[4.32,4.245],[4.36,4.245],[4.4,4.245],[4.44,4.245],[4.48,4.245],[4.52,4.245],[4.56,4.245],[4.6,4.245],[4.64,4.245],[4.68,4.245],[4.72,4.245],[4.76,4.245],[4.8,4.245],[4.84,4.245],[4.88,4.245],[4.92,4.245],[4.96,4.245],[5.0,4.245],[5.04,4.245],[5.08,4.245],[5.12,4.245],[5.16,4.245],[5.2,4.245],[5.24,4.245],[5.28,4.245],[5.32,4.245],[5.36,4.245],[5.4,4.245],[5.44,4.245],[5.48,4.245],[5.52,4.245],[5.56,4.245],[5.6,4.245],[5.64,4.245],[5.68,4.245],[5.72,4.245],[5.76,4.245],[5.8,4.245],[5.84,4.245],[5.88,4.245],[5.92,4.245],[5.96,4.245][6.0,4.245]],
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'#333333',
                        width: 1,
                    }  
                }  
            }
        }
    ] : []
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
